@ethlete/query-devtools 1.0.0-next.3 → 1.0.0-next.4
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 +6 -0
- package/fesm2022/ethlete-query-devtools-toggle.mjs +7 -2
- package/fesm2022/ethlete-query-devtools-toggle.mjs.map +1 -1
- package/fesm2022/ethlete-query-devtools.mjs +1 -1
- package/fesm2022/ethlete-query-devtools.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ethlete-query-devtools.d.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 1.0.0-next.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`5c1190a`](https://github.com/ethlete-io/ethdk/commit/5c1190ac76c244ff1c293b390dd599ed016d26de) Thanks [@TomTomB](https://github.com/TomTomB)! - Overlays: a press on a surface stacked above them no longer counts as an outside press, so working in the query devtools leaves an open dialog, sheet, menu, select or tooltip alone.
|
|
8
|
+
|
|
3
9
|
## 1.0.0-next.3
|
|
4
10
|
|
|
5
11
|
### Minor Changes
|
|
@@ -24,7 +24,7 @@ class QueryDevtoolsToggleComponent {
|
|
|
24
24
|
this.shortcut = queryDevtoolsShortcutLabel();
|
|
25
25
|
}
|
|
26
26
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryDevtoolsToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: QueryDevtoolsToggleComponent, isStandalone: true, selector: "et-query-devtools-toggle", inputs: { tampered: { classPropertyName: "tampered", publicName: "tampered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, ngImport: i0, template: `
|
|
27
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: QueryDevtoolsToggleComponent, isStandalone: true, selector: "et-query-devtools-toggle", inputs: { tampered: { classPropertyName: "tampered", publicName: "tampered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, host: { attributes: { "data-et-overlay-layer": "2147483010" } }, ngImport: i0, template: `
|
|
28
28
|
<button (click)="openChange.emit()" type="button" title="Open query devtools ({{ shortcut }})">
|
|
29
29
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
30
30
|
<ellipse cx="12" cy="6" rx="7.5" ry="3" />
|
|
@@ -54,7 +54,12 @@ 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,
|
|
57
|
+
`, encapsulation: ViewEncapsulation.ShadowDom, host: {
|
|
58
|
+
// The level this button paints at - the same number as the `z-index` below; keep the two in step.
|
|
59
|
+
// It tells @ethlete/core that a press here lands on a surface above an application overlay, so
|
|
60
|
+
// opening the devtools does not read as an outside press and close it.
|
|
61
|
+
'data-et-overlay-layer': '2147483010',
|
|
62
|
+
}, 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
63
|
}], propDecorators: { tampered: [{ type: i0.Input, args: [{ isSignal: true, alias: "tampered", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
|
|
59
64
|
|
|
60
65
|
/**
|
|
@@ -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 /* 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;
|
|
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 host: {\n // The level this button paints at - the same number as the `z-index` below; keep the two in step.\n // It tells @ethlete/core that a press here lands on a surface above an application overlay, so\n // opening the devtools does not read as an outside press and close it.\n 'data-et-overlay-layer': '2147483010',\n },\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;MAqIU,4BAA4B,CAAA;AApIzC,IAAA,WAAA,GAAA;QAqIS,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,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,uBAAA,EAAA,YAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAlI7B;;;;;;;;;;;;;AAaT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,4jDAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,SAAA,EAAA,CAAA,CAAA;;2FAqHU,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBApIxC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,0BAA0B,EAAA,QAAA,EAC1B;;;;;;;;;;;;;GAaT,EAAA,aAAA,EAIc,iBAAiB,CAAC,SAAS,EAAA,IAAA,EACpC;;;;AAIJ,wBAAA,uBAAuB,EAAE,YAAY;AACtC,qBAAA,EAAA,MAAA,EAAA,CAAA,4jDAAA,CAAA,EAAA;;;AChCH;;;;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;;;;"}
|
|
@@ -3205,7 +3205,7 @@ const summarizeLocks = (options) => {
|
|
|
3205
3205
|
|
|
3206
3206
|
// Generated from package.json by tools/scripts/generate-version.js - do not edit.
|
|
3207
3207
|
/** The version of `@ethlete/query-devtools` this build was cut from. */
|
|
3208
|
-
const QUERY_DEVTOOLS_VERSION = '1.0.0-next.
|
|
3208
|
+
const QUERY_DEVTOOLS_VERSION = '1.0.0-next.4';
|
|
3209
3209
|
|
|
3210
3210
|
/* eslint-disable @typescript-eslint/naming-convention -- the `__export_*` keys are Insomnia's file format */
|
|
3211
3211
|
const WORKSPACE_ID = 'wrk_ethlete_query_devtools';
|