@swiftwc/ui 0.0.0-dev.102 → 0.0.0-dev.105
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/generated/client/index.js +5 -5
- package/generated/components/alert-dialog.js +10 -17
- package/generated/components/body-view.js +3 -5
- package/generated/components/bordered-button.js +5 -7
- package/generated/components/bordered-prominent-button.js +5 -7
- package/generated/components/borderless-button.js +5 -7
- package/generated/components/color-scheme.js +4 -7
- package/generated/components/confirmation-dialog.js +10 -17
- package/generated/components/content-unavailable.js +5 -7
- package/generated/components/date-picker.js +14 -25
- package/generated/components/detail-placeholder.js +4 -8
- package/generated/components/disclosure-group.js +6 -9
- package/generated/components/fine-tooltip.js +5 -7
- package/generated/components/form-view.js +4 -5
- package/generated/components/glass-button.js +5 -7
- package/generated/components/glass-prominent-button.js +5 -7
- package/generated/components/h-divider.d.ts +11 -0
- package/generated/components/h-divider.js +15 -0
- package/generated/components/h-stack.js +3 -5
- package/generated/components/image-view.js +5 -7
- package/generated/components/index.d.ts +2 -0
- package/generated/components/index.js +2 -0
- package/generated/components/label-view.js +5 -7
- package/generated/components/labeled-content.js +5 -7
- package/generated/components/list-view.js +4 -5
- package/generated/components/menu-view.js +11 -19
- package/generated/components/navigation-large-title.js +6 -9
- package/generated/components/navigation-split-view.js +4 -7
- package/generated/components/navigation-stack.js +4 -7
- package/generated/components/navigation-title.js +4 -7
- package/generated/components/picker-view.js +62 -62
- package/generated/components/plain-button.js +4 -5
- package/generated/components/progress-view.js +7 -11
- package/generated/components/screen-view.js +2 -3
- package/generated/components/scroll-view-proxy.js +3 -5
- package/generated/components/scroll-view.js +10 -16
- package/generated/components/search-view.js +5 -7
- package/generated/components/section-view.js +5 -7
- package/generated/components/sheet-view.js +7 -11
- package/generated/components/sidebar-toggle.js +6 -9
- package/generated/components/sidebar-view.js +3 -3
- package/generated/components/sticky-container.js +4 -5
- package/generated/components/tab-bar.js +5 -7
- package/generated/components/tab-item.js +9 -15
- package/generated/components/tab-view.js +9 -14
- package/generated/components/table-view.js +7 -11
- package/generated/components/text-field.js +11 -19
- package/generated/components/text-view.js +4 -7
- package/generated/components/toggle-view.js +14 -25
- package/generated/components/tool-bar-item-group.js +3 -5
- package/generated/components/tool-bar-item.js +5 -7
- package/generated/components/tool-bar.js +5 -7
- package/generated/components/v-divider.d.ts +11 -0
- package/generated/components/v-divider.js +15 -0
- package/generated/components/v-keyboard.js +9 -12
- package/generated/components/v-stack.js +3 -5
- package/generated/css/index.css +15 -7
- package/generated/internal/class/css-style-observer.js +3 -3
- package/generated/internal/class/form-associated-base.js +5 -7
- package/generated/internal/class/navigation-view.js +4 -5
- package/generated/internal/decorators/adaptive-slot.js +5 -7
- package/generated/internal/decorators/microtask-on-connected.d.ts +2 -2
- package/generated/internal/decorators/microtask-on-connected.js +2 -2
- package/generated/internal/flags.json +3 -0
- package/generated/internal/privateNamespace.js +12 -21
- package/generated/internal/utils/$.d.ts +9 -0
- package/generated/internal/utils/$.js +11 -0
- package/generated/internal/utils/index.d.ts +35 -1
- package/generated/internal/utils/index.js +35 -4
- package/generated/snapshot/index.js +4 -5
- package/package.json +10 -7
- package/scss/components/_index.scss +3 -1
- package/scss/components/_picker-view.scss +2 -2
- package/web-components.html-data/en.json +8 -0
- package/generated/internal/utils/cash/index.d.ts +0 -24
- package/generated/internal/utils/cash/index.js +0 -27
- /package/generated/internal/utils/{cash/ancestors.d.ts → ancestors.d.ts} +0 -0
- /package/generated/internal/utils/{cash/ancestors.js → ancestors.js} +0 -0
- /package/generated/internal/utils/{cash/next-all.d.ts → next-all.d.ts} +0 -0
- /package/generated/internal/utils/{cash/next-all.js → next-all.js} +0 -0
- /package/generated/internal/utils/{cash/next.d.ts → next.d.ts} +0 -0
- /package/generated/internal/utils/{cash/next.js → next.js} +0 -0
- /package/generated/internal/utils/{cash/prev-all.d.ts → prev-all.d.ts} +0 -0
- /package/generated/internal/utils/{cash/prev-all.js → prev-all.js} +0 -0
- /package/generated/internal/utils/{cash/prev.d.ts → prev.d.ts} +0 -0
- /package/generated/internal/utils/{cash/prev.js → prev.js} +0 -0
- /package/generated/internal/utils/{cash/prop.d.ts → prop.d.ts} +0 -0
- /package/generated/internal/utils/{cash/prop.js → prop.js} +0 -0
- /package/generated/internal/utils/{cash/siblings.d.ts → siblings.d.ts} +0 -0
- /package/generated/internal/utils/{cash/siblings.js → siblings.js} +0 -0
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
var _a;
|
|
2
|
+
import { DEBUG } from '../internal/flags.json' with { type: 'json' };
|
|
2
3
|
import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
|
|
3
|
-
import {
|
|
4
|
+
import { $ } from '../internal/utils';
|
|
4
5
|
import { html } from '../tpl';
|
|
5
6
|
const observers = new ResizeObserverSingleton();
|
|
6
7
|
/**
|
|
@@ -58,8 +59,7 @@ export class ToolBar extends HTMLElement {
|
|
|
58
59
|
this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
|
|
59
60
|
}
|
|
60
61
|
connectedCallback() {
|
|
61
|
-
|
|
62
|
-
console.debug(`${_a.name} ⚡️ connect`);
|
|
62
|
+
DEBUG && console.debug(`${_a.name} ⚡️ connect`);
|
|
63
63
|
// NOTE: wait for config
|
|
64
64
|
// Snapshot.waitReady.then(() => {
|
|
65
65
|
for (const el of this.#shadowRoot.querySelectorAll(`[part*="toolbar-leading-stack"],[part*="toolbar-trailing-stack"]`))
|
|
@@ -67,13 +67,11 @@ export class ToolBar extends HTMLElement {
|
|
|
67
67
|
// })
|
|
68
68
|
}
|
|
69
69
|
disconnectedCallback() {
|
|
70
|
-
|
|
71
|
-
console.debug(`${_a.name} ⚡️ disconnect`);
|
|
70
|
+
DEBUG && console.debug(`${_a.name} ⚡️ disconnect`);
|
|
72
71
|
observers.unobserve(this);
|
|
73
72
|
}
|
|
74
73
|
#measureStacks(entry) {
|
|
75
|
-
|
|
76
|
-
console.debug(`${_a.name} ⚡️ measure`);
|
|
74
|
+
DEBUG && console.debug(`${_a.name} ⚡️ measure`);
|
|
77
75
|
if (this.closest('[hidden]'))
|
|
78
76
|
return;
|
|
79
77
|
const leading = 'toolbar-leading-stack', trailing = 'toolbar-trailing-stack';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export declare class VDivider extends HTMLElement {
|
|
2
|
+
constructor();
|
|
3
|
+
connectedCallback(): void;
|
|
4
|
+
disconnectedCallback(): void;
|
|
5
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
6
|
+
}
|
|
7
|
+
declare global {
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
'v-divider': VDivider;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { DEBUG } from '../internal/flags.json' with { type: 'json' };
|
|
2
|
+
export class VDivider extends HTMLElement {
|
|
3
|
+
constructor() {
|
|
4
|
+
super();
|
|
5
|
+
}
|
|
6
|
+
connectedCallback() {
|
|
7
|
+
DEBUG && console.debug(`${VDivider.name} ⚡️ connect`);
|
|
8
|
+
}
|
|
9
|
+
disconnectedCallback() {
|
|
10
|
+
DEBUG && console.debug(`${VDivider.name} ⚡️ disconnect`);
|
|
11
|
+
}
|
|
12
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
13
|
+
DEBUG && console.debug(`${VDivider.name} ⚡️ attr-change [${name}]`);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
var _a;
|
|
2
|
+
import { DEBUG } from '../internal/flags.json' with { type: 'json' };
|
|
2
3
|
import { CleanupRegistry } from '../internal/class/cleanup-registry';
|
|
3
|
-
import {
|
|
4
|
+
import { frame, onoff, prop, sleep } from '../internal/utils';
|
|
4
5
|
import { Snapshot } from '../snapshot';
|
|
5
6
|
/**
|
|
6
7
|
* BUG: Safari on IOS reports inaccurate innerHeight (which is what we really want) on orientationchange.
|
|
@@ -22,13 +23,11 @@ export class VKeyboard extends HTMLElement {
|
|
|
22
23
|
super();
|
|
23
24
|
}
|
|
24
25
|
disconnectedCallback() {
|
|
25
|
-
|
|
26
|
-
console.debug(`${_a.name} ⚡️ disconnect`);
|
|
26
|
+
DEBUG && console.debug(`${_a.name} ⚡️ disconnect`);
|
|
27
27
|
CleanupRegistry.unregister(this);
|
|
28
28
|
}
|
|
29
29
|
connectedCallback() {
|
|
30
|
-
|
|
31
|
-
console.debug(`${_a.name} ⚡️ connect`);
|
|
30
|
+
DEBUG && console.debug(`${_a.name} ⚡️ connect`);
|
|
32
31
|
this.inert = true;
|
|
33
32
|
CleanupRegistry.register(this, onoff([
|
|
34
33
|
{ types: 'scroll', listener: this.#handleWindowScroll },
|
|
@@ -54,21 +53,19 @@ export class VKeyboard extends HTMLElement {
|
|
|
54
53
|
#handleVisualViewportResize = () => {
|
|
55
54
|
const dvh = self.visualViewport?.height ?? 0, fullLvh = this.offsetHeight;
|
|
56
55
|
const diff = Math.abs(self.outerHeight - (this.#shouldKeyboardBeOpenCallback() ? dvh : fullLvh));
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
56
|
+
prop('--100lvh', 30 < diff ? `${dvh}px` : `${fullLvh}px`, document.documentElement); //document.documentElement.style.setProperty('--100lvh', 30 < diff ? `${dvh}px` : `${fullLvh}px`)
|
|
57
|
+
prop('--keyboard-inset-top', 30 < diff ? `${dvh}px` : `${fullLvh}px`, document.documentElement); //document.documentElement.style.setProperty('--keyboard-inset-top', 30 < diff ? `${dvh}px` : `${fullLvh}px`)
|
|
58
|
+
prop('--keyboard-inset-height', 30 < diff ? `${diff}px` : `0px`, document.documentElement); //document.documentElement.style.setProperty('--keyboard-inset-height', 30 < diff ? `${diff}px` : `0px`)
|
|
60
59
|
self.scrollTo(0, 0);
|
|
61
60
|
};
|
|
62
61
|
#handleWindowOrientationchange = async () => {
|
|
63
|
-
|
|
64
|
-
console.debug(`${_a.name} ⚡️ orientationchange`);
|
|
62
|
+
DEBUG && console.debug(`${_a.name} ⚡️ orientationchange`);
|
|
65
63
|
if (!(await frame(this)))
|
|
66
64
|
return; //self.requestAnimationFrame(this.#ifKeyboardScrollIntoActiveElement)
|
|
67
65
|
this.#ifKeyboardScrollIntoActiveElement();
|
|
68
66
|
};
|
|
69
67
|
#handleBodyFocusin = async () => {
|
|
70
|
-
|
|
71
|
-
console.debug(`${_a.name} ⚡️ focusin`);
|
|
68
|
+
DEBUG && console.debug(`${_a.name} ⚡️ focusin`);
|
|
72
69
|
await sleep(100); // self.setTimeout(this.#ifKeyboardScrollIntoActiveElement, 100)
|
|
73
70
|
if (!this.isConnected)
|
|
74
71
|
return;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { DEBUG } from '../internal/flags.json' with { type: 'json' };
|
|
2
2
|
/**
|
|
3
3
|
* @summary A view that arranges its children one on top of the other.
|
|
4
4
|
*
|
|
@@ -19,11 +19,9 @@ export class VStack extends HTMLElement {
|
|
|
19
19
|
super();
|
|
20
20
|
}
|
|
21
21
|
connectedCallback() {
|
|
22
|
-
|
|
23
|
-
console.debug(`${VStack.name} ⚡️ connect`);
|
|
22
|
+
DEBUG && console.debug(`${VStack.name} ⚡️ connect`);
|
|
24
23
|
}
|
|
25
24
|
disconnectedCallback() {
|
|
26
|
-
|
|
27
|
-
console.debug(`${VStack.name} ⚡️ disconnect`);
|
|
25
|
+
DEBUG && console.debug(`${VStack.name} ⚡️ disconnect`);
|
|
28
26
|
}
|
|
29
27
|
}
|
package/generated/css/index.css
CHANGED
|
@@ -1132,7 +1132,9 @@
|
|
|
1132
1132
|
text-field:not([hidden]),
|
|
1133
1133
|
detail-placeholder:not([hidden]),
|
|
1134
1134
|
sticky-container:not([hidden]),
|
|
1135
|
-
picker-view:not([hidden])
|
|
1135
|
+
picker-view:not([hidden]),
|
|
1136
|
+
h-divider:not([hidden]),
|
|
1137
|
+
v-divider:not([hidden])) {
|
|
1136
1138
|
display: grid;
|
|
1137
1139
|
}
|
|
1138
1140
|
:where(tab-view:has(navigation-stack:not(:defined),
|
|
@@ -1163,7 +1165,9 @@
|
|
|
1163
1165
|
text-field:not(:defined),
|
|
1164
1166
|
detail-placeholder:not(:defined),
|
|
1165
1167
|
sticky-container:not(:defined),
|
|
1166
|
-
picker-view:not(:defined)
|
|
1168
|
+
picker-view:not(:defined),
|
|
1169
|
+
h-divider:not(:defined),
|
|
1170
|
+
v-divider:not(:defined)), navigation-split-view:has(navigation-stack:not(:defined),
|
|
1167
1171
|
navigation-split-view:not(:defined),
|
|
1168
1172
|
navigation-large-title:not(:defined),
|
|
1169
1173
|
navigation-title:not(:defined),
|
|
@@ -1191,7 +1195,9 @@
|
|
|
1191
1195
|
text-field:not(:defined),
|
|
1192
1196
|
detail-placeholder:not(:defined),
|
|
1193
1197
|
sticky-container:not(:defined),
|
|
1194
|
-
picker-view:not(:defined)
|
|
1198
|
+
picker-view:not(:defined),
|
|
1199
|
+
h-divider:not(:defined),
|
|
1200
|
+
v-divider:not(:defined)), navigation-stack:has(navigation-stack:not(:defined),
|
|
1195
1201
|
navigation-split-view:not(:defined),
|
|
1196
1202
|
navigation-large-title:not(:defined),
|
|
1197
1203
|
navigation-title:not(:defined),
|
|
@@ -1219,7 +1225,9 @@
|
|
|
1219
1225
|
text-field:not(:defined),
|
|
1220
1226
|
detail-placeholder:not(:defined),
|
|
1221
1227
|
sticky-container:not(:defined),
|
|
1222
|
-
picker-view:not(:defined)
|
|
1228
|
+
picker-view:not(:defined),
|
|
1229
|
+
h-divider:not(:defined),
|
|
1230
|
+
v-divider:not(:defined))) {
|
|
1223
1231
|
visibility: hidden;
|
|
1224
1232
|
}
|
|
1225
1233
|
:where([is=search-view]:not([hidden]),
|
|
@@ -5303,14 +5311,14 @@
|
|
|
5303
5311
|
--picker--stack-grid-border: if(
|
|
5304
5312
|
style(--picker-style: sheet): var(--itemborder,) ; style(--picker-style: navigation-link): var(--itemborder,) ; style(--picker-style: menu): var(--itemborder,) ;
|
|
5305
5313
|
);
|
|
5306
|
-
--picker--input-stack-text-align: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu):
|
|
5314
|
+
--picker--input-stack-text-align: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): start ;);
|
|
5307
5315
|
}
|
|
5308
5316
|
}
|
|
5309
5317
|
@supports not (x: if(else:red)) {
|
|
5310
5318
|
@container style(--picker-style: menu) {
|
|
5311
5319
|
:where(picker-view:not([picker-style])) {
|
|
5312
5320
|
--picker--labelstack-display: grid;
|
|
5313
|
-
--picker--input-stack-text-align:
|
|
5321
|
+
--picker--input-stack-text-align: start;
|
|
5314
5322
|
--picker--stack-row-gap: var(--labeled-content-row-gap);
|
|
5315
5323
|
--picker--stack-column-gap: var(--labeled-content-column-gap);
|
|
5316
5324
|
--picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
|
|
@@ -5351,7 +5359,7 @@
|
|
|
5351
5359
|
}
|
|
5352
5360
|
:where(form picker-view[picker-style=menu]) {
|
|
5353
5361
|
--picker--labelstack-display: grid;
|
|
5354
|
-
--picker--input-stack-text-align:
|
|
5362
|
+
--picker--input-stack-text-align: start;
|
|
5355
5363
|
--picker--stack-row-gap: var(--labeled-content-row-gap);
|
|
5356
5364
|
--picker--stack-column-gap: var(--labeled-content-column-gap);
|
|
5357
5365
|
--picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
var _a;
|
|
2
|
-
import {
|
|
2
|
+
import { DEBUG } from '../../internal/flags.json' with { type: 'json' };
|
|
3
|
+
import { onoff } from '../../internal/utils';
|
|
3
4
|
export class CSSStyleObserver {
|
|
4
5
|
#cleanups;
|
|
5
6
|
#options;
|
|
@@ -16,8 +17,7 @@ export class CSSStyleObserver {
|
|
|
16
17
|
this.#cleanups?.();
|
|
17
18
|
}
|
|
18
19
|
#handleTransitionrun = (callback, evt) => {
|
|
19
|
-
|
|
20
|
-
console.debug(`${_a.name} ⚡️ ${evt?.type} (${evt.propertyName})`);
|
|
20
|
+
DEBUG && console.debug(`${_a.name} ⚡️ ${evt?.type} (${evt.propertyName})`);
|
|
21
21
|
if (!this.#options?.properties.some((prop) => evt.propertyName.startsWith(prop)))
|
|
22
22
|
return;
|
|
23
23
|
callback?.(evt);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { DEBUG } from '../../internal/flags.json' with { type: 'json' };
|
|
2
2
|
import { CleanupRegistry } from './cleanup-registry';
|
|
3
3
|
const internals = new WeakMap();
|
|
4
4
|
// const trackedElements = new WeakMap<FormAssociatedBase, Set<Element>>()
|
|
@@ -11,14 +11,14 @@ export function getInternals(instance) {
|
|
|
11
11
|
}
|
|
12
12
|
// export function makeSlotchangeHandler(t: FormAssociatedBase) {
|
|
13
13
|
// const handleSlotchange = ({ type, target: slot }: Event) => {
|
|
14
|
-
//
|
|
14
|
+
// DEBUG && console.debug(`${makeSlotchangeHandler.name} ⚡️ ${type}`)
|
|
15
15
|
// if (!(slot instanceof HTMLSlotElement && slot)) return
|
|
16
16
|
// const assigned = slot.assignedElements({ flatten: true })
|
|
17
17
|
// observers.syncObservations(trackedElements.get(t) ?? new Set(), assigned, handleTagMutation, ['value', 'label'])
|
|
18
18
|
// if (0 < assigned.length) handleTagMutation()
|
|
19
19
|
// },
|
|
20
20
|
// handleTagMutation = (entry?: MutationRecord) => {
|
|
21
|
-
//
|
|
21
|
+
// DEBUG && console.debug(`${handleTagMutation.name} ⚡️ mutation`)
|
|
22
22
|
// t.setValidity(t.validity, t.validationMessage)
|
|
23
23
|
// }
|
|
24
24
|
// return [{ types: 'slotchange', listener: handleSlotchange }]
|
|
@@ -33,14 +33,12 @@ export class FormAssociatedBase extends HTMLElement {
|
|
|
33
33
|
// trackedElements.set(this, new Set<Element>())
|
|
34
34
|
}
|
|
35
35
|
disconnectedCallback() {
|
|
36
|
-
|
|
37
|
-
console.debug(`${FormAssociatedBase.name} ⚡️ disconnect`);
|
|
36
|
+
DEBUG && console.debug(`${FormAssociatedBase.name} ⚡️ disconnect`);
|
|
38
37
|
CleanupRegistry.unregister(this);
|
|
39
38
|
// observers.clearObservationsSet(trackedElements.get(this) ?? new Set())
|
|
40
39
|
}
|
|
41
40
|
connectedCallback() {
|
|
42
|
-
|
|
43
|
-
console.debug(`${FormAssociatedBase.name} ⚡️ connect`);
|
|
41
|
+
DEBUG && console.debug(`${FormAssociatedBase.name} ⚡️ connect`);
|
|
44
42
|
}
|
|
45
43
|
get type() {
|
|
46
44
|
return this.localName;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
var _a;
|
|
2
2
|
import { lifecycleObserver } from '../../buses';
|
|
3
|
+
import { DEBUG } from '../../internal/flags.json' with { type: 'json' };
|
|
3
4
|
import { CleanupRegistry } from '../../internal/class/cleanup-registry';
|
|
4
|
-
import {
|
|
5
|
+
import { frame, onoff } from '../utils';
|
|
5
6
|
export class NavigationView extends HTMLElement {
|
|
6
7
|
static get observedAttributes() {
|
|
7
8
|
return ['hidden'];
|
|
@@ -31,8 +32,7 @@ export class NavigationView extends HTMLElement {
|
|
|
31
32
|
// consume it (important so it doesn’t leak to next change)
|
|
32
33
|
this.#recentBefore = undefined;
|
|
33
34
|
}
|
|
34
|
-
|
|
35
|
-
console.debug(`${_a.name} 💡 ${eventType}`);
|
|
35
|
+
DEBUG && console.debug(`${_a.name} 💡 ${eventType}`);
|
|
36
36
|
frame(this).then(() => target.dispatchEvent(new CustomEvent(eventType, { detail: { tag: this.id }, bubbles: true, composed: true })));
|
|
37
37
|
break;
|
|
38
38
|
}
|
|
@@ -56,8 +56,7 @@ export class NavigationView extends HTMLElement {
|
|
|
56
56
|
frame(this).then(() => lifecycleObserver.dispatchEvent(new CustomEvent('tabshow', { detail: { tag: this.id }, bubbles: true, composed: true })));
|
|
57
57
|
}
|
|
58
58
|
#handleBeforeTabRevealOrSwap = ({ type, detail }) => {
|
|
59
|
-
|
|
60
|
-
console.debug(`${_a.name} ⚡️ ${type}`);
|
|
59
|
+
DEBUG && console.debug(`${_a.name} ⚡️ ${type}`);
|
|
61
60
|
if (this.id !== detail?.tag)
|
|
62
61
|
return;
|
|
63
62
|
this.#recentBefore = {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
+
import { DEBUG } from '../../internal/flags.json' with { type: 'json' };
|
|
1
2
|
import { Snapshot } from '../../snapshot';
|
|
2
3
|
import { CleanupRegistry } from '../class/cleanup-registry';
|
|
3
|
-
import {
|
|
4
|
+
import { onoff } from '../utils';
|
|
4
5
|
export default function (filter) {
|
|
5
6
|
const handleMediaChange = (el, { type, matches }) => {
|
|
6
|
-
|
|
7
|
-
console.debug(`${el.localName} ⚡️ ${type}`);
|
|
7
|
+
DEBUG && console.debug(`${el.localName} ⚡️ ${type}`);
|
|
8
8
|
if (matches) {
|
|
9
9
|
if (!el.matches(`[slot="cancellation-action"],[slot="primary-action"],[slot="confirmation-action"],[slot="destructive-action"]`))
|
|
10
10
|
return;
|
|
@@ -23,8 +23,7 @@ export default function (filter) {
|
|
|
23
23
|
return function (Base, _context) {
|
|
24
24
|
const originalConnected = Base.prototype.connectedCallback, originalDisconnected = Base.prototype.disconnectedCallback;
|
|
25
25
|
Base.prototype.connectedCallback = function () {
|
|
26
|
-
|
|
27
|
-
console.debug(`decorator:[${this.localName}] ⚡️ connect`);
|
|
26
|
+
DEBUG && console.debug(`decorator:[${this.localName}] ⚡️ connect`);
|
|
28
27
|
originalConnected?.call(this);
|
|
29
28
|
if (filter && !filter(this))
|
|
30
29
|
return;
|
|
@@ -41,8 +40,7 @@ export default function (filter) {
|
|
|
41
40
|
});
|
|
42
41
|
};
|
|
43
42
|
Base.prototype.disconnectedCallback = function () {
|
|
44
|
-
|
|
45
|
-
console.debug(`decorator:[${this.localName}] ⚡️ disconnect`);
|
|
43
|
+
DEBUG && console.debug(`decorator:[${this.localName}] ⚡️ disconnect`);
|
|
46
44
|
originalDisconnected?.call(this);
|
|
47
45
|
CleanupRegistry.unregister(this, 'adaptive-slot');
|
|
48
46
|
};
|
|
@@ -23,13 +23,13 @@ class() {
|
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
connectedCallback() {
|
|
26
|
-
|
|
26
|
+
DEBUG && console.debug(`${NavigationTitle.name} ⚡️ connect`)
|
|
27
27
|
|
|
28
28
|
this.#scheduleSync()
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
|
|
32
|
-
|
|
32
|
+
DEBUG && console.debug(`${NavigationTitle.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`)
|
|
33
33
|
|
|
34
34
|
this.#scheduleSync()
|
|
35
35
|
|
|
@@ -23,13 +23,13 @@ class() {
|
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
connectedCallback() {
|
|
26
|
-
|
|
26
|
+
DEBUG && console.debug(`${NavigationTitle.name} ⚡️ connect`)
|
|
27
27
|
|
|
28
28
|
this.#scheduleSync()
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
|
|
32
|
-
|
|
32
|
+
DEBUG && console.debug(`${NavigationTitle.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`)
|
|
33
33
|
|
|
34
34
|
this.#scheduleSync()
|
|
35
35
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { DEBUG } from '../internal/flags.json' with { type: 'json' };
|
|
1
2
|
import { NavigationPath } from '../internal/class/navigation-path';
|
|
2
|
-
import { devFlags } from '../internal/utils';
|
|
3
3
|
import { Snapshot } from '../snapshot';
|
|
4
4
|
export function queryInsertPosition(frame) {
|
|
5
5
|
if ('NAVIGATION-SPLIT-VIEW' === frame?.tagName)
|
|
@@ -18,8 +18,7 @@ const cleanup = (lm, type) => {
|
|
|
18
18
|
el.classList.remove(...arr);
|
|
19
19
|
};
|
|
20
20
|
export const startViewTransition = async (target, type = 'forwards', updateCallbackOrOptions = async () => { }) => {
|
|
21
|
-
|
|
22
|
-
console.debug(`startViewTransition (${type})`, target);
|
|
21
|
+
DEBUG && console.debug(`startViewTransition (${type})`, target);
|
|
23
22
|
if (!(target instanceof HTMLElement))
|
|
24
23
|
throw new TypeError("Argument 1 ('target') to client.startViewTransition must be an instance of HTMLElement");
|
|
25
24
|
if (!['forwards', 'backwards', 'reload'].includes(type))
|
|
@@ -58,9 +57,9 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
|
|
|
58
57
|
// dialogFrames = [toFrame, ...(Snapshot.leaveFrames ?? [])].filter((item): item is HTMLDialogElement => item instanceof HTMLDialogElement) //[toFrame, ...(Snapshot.leaveFrames ?? [])].filter((item) => item?.matches('dialog'))
|
|
59
58
|
// if ('DIALOG' === newHost?.tagName) {
|
|
60
59
|
// ;(newHost as HTMLDialogElement).showModal()
|
|
61
|
-
//
|
|
60
|
+
// DEBUG && console.debug(`⚡️ view-transition-start (${type})`)
|
|
62
61
|
// await Promise.allSettled(newHost.getAnimations().map(({ finished }) => finished))
|
|
63
|
-
//
|
|
62
|
+
// DEBUG && console.debug(`⚡️ view-transition-end (${type})`)
|
|
64
63
|
// return
|
|
65
64
|
// }
|
|
66
65
|
// purge
|
|
@@ -83,18 +82,14 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
|
|
|
83
82
|
if (0 < modalViews.length) {
|
|
84
83
|
for await (const el of modalViews)
|
|
85
84
|
el.showModal();
|
|
86
|
-
|
|
87
|
-
console.debug(`⚡️ view-dialog-transition-start (${type})`);
|
|
85
|
+
DEBUG && console.debug(`⚡️ view-dialog-transition-start (${type})`);
|
|
88
86
|
await Promise.allSettled(modalViews?.[0].getAnimations().map(({ finished }) => finished));
|
|
89
|
-
|
|
90
|
-
console.debug(`⚡️ view-dialog-transition-end (${type})`);
|
|
87
|
+
DEBUG && console.debug(`⚡️ view-dialog-transition-end (${type})`);
|
|
91
88
|
}
|
|
92
89
|
else {
|
|
93
|
-
|
|
94
|
-
console.debug(`⚡️ view-transition-start (${type})`);
|
|
90
|
+
DEBUG && console.debug(`⚡️ view-transition-start (${type})`);
|
|
95
91
|
await Promise.allSettled([...(from.body?.getAnimations().map(({ finished }) => finished) ?? []), ...(to?.body?.getAnimations().map(({ finished }) => finished) ?? [])]);
|
|
96
|
-
|
|
97
|
-
console.debug(`⚡️ view-transition-end (${type})`);
|
|
92
|
+
DEBUG && console.debug(`⚡️ view-transition-end (${type})`);
|
|
98
93
|
}
|
|
99
94
|
if (0 < (to?.component?.querySelectorAll(`.${Snapshot.config?.['vt-fwd-class-name']},.bwd`) ?? []).length)
|
|
100
95
|
return;
|
|
@@ -115,11 +110,9 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
|
|
|
115
110
|
if ('DIALOG' === from.component?.tagName) {
|
|
116
111
|
from.body?.dispatchEvent(new CustomEvent('pageswap', { detail: { page: from.body }, bubbles: true, composed: true }));
|
|
117
112
|
from.component.close();
|
|
118
|
-
|
|
119
|
-
console.debug(`⚡️ view-dialog-transition-start (${type})`);
|
|
113
|
+
DEBUG && console.debug(`⚡️ view-dialog-transition-start (${type})`);
|
|
120
114
|
await Promise.allSettled(from.component.getAnimations().map(({ finished }) => finished));
|
|
121
|
-
|
|
122
|
-
console.debug(`⚡️ view-dialog-transition-end (${type})`);
|
|
115
|
+
DEBUG && console.debug(`⚡️ view-dialog-transition-end (${type})`);
|
|
123
116
|
if (from.component.matches('[open]'))
|
|
124
117
|
return;
|
|
125
118
|
await updateCallback();
|
|
@@ -154,11 +147,9 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
|
|
|
154
147
|
for (const el of inbetweenModals)
|
|
155
148
|
el.close(); // close old inbetween modals
|
|
156
149
|
// capture trans
|
|
157
|
-
|
|
158
|
-
console.debug(`⚡️ view-transition-start (${type})`);
|
|
150
|
+
DEBUG && console.debug(`⚡️ view-transition-start (${type})`);
|
|
159
151
|
await Promise.allSettled([...(from.body?.getAnimations().map(({ finished }) => finished) ?? []), ...(to.body?.getAnimations().map(({ finished }) => finished) ?? [])]);
|
|
160
|
-
|
|
161
|
-
console.debug(`⚡️ view-transition-end (${type})`);
|
|
152
|
+
DEBUG && console.debug(`⚡️ view-transition-end (${type})`);
|
|
162
153
|
if (to.body?.closest(`.bwd,.${Snapshot.config?.['vt-fwd-class-name']}`))
|
|
163
154
|
return;
|
|
164
155
|
cleanup(root);
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { type TemplateResult } from '../../tpl';
|
|
2
|
+
declare const DEFAULT: ">1";
|
|
3
|
+
interface MintFn {
|
|
4
|
+
(markup: TemplateResult): DocumentFragment;
|
|
5
|
+
<T extends Element = Element>(markup: TemplateResult, selector: typeof DEFAULT): T;
|
|
6
|
+
<T extends Element = Element>(markup: TemplateResult, selector: string): T;
|
|
7
|
+
}
|
|
8
|
+
declare const mint: MintFn;
|
|
9
|
+
export default mint;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { renderToString } from '../../morphdom';
|
|
2
|
+
const DEFAULT = '>1';
|
|
3
|
+
const mint = ((markup, selector) => {
|
|
4
|
+
const template = Object.assign(document.createElement('template'), { innerHTML: renderToString(markup).toString() });
|
|
5
|
+
if (!selector)
|
|
6
|
+
return template.content;
|
|
7
|
+
if (selector === DEFAULT)
|
|
8
|
+
return template.content.firstElementChild;
|
|
9
|
+
return template.content.querySelector('>1' === selector ? ':first-child' : selector);
|
|
10
|
+
});
|
|
11
|
+
export default mint;
|
|
@@ -1,20 +1,54 @@
|
|
|
1
|
+
export { default as $ } from './$';
|
|
2
|
+
export * from './$';
|
|
1
3
|
export { default as add } from './add';
|
|
2
|
-
export
|
|
4
|
+
export * from './add';
|
|
5
|
+
export { default as ancestors } from './ancestors';
|
|
6
|
+
export * from './ancestors';
|
|
3
7
|
export { default as clamp } from './clamp';
|
|
8
|
+
export * from './clamp';
|
|
4
9
|
export { default as compareBigDecimals } from './compare-big-decimals';
|
|
10
|
+
export * from './compare-big-decimals';
|
|
5
11
|
export { default as cssTime } from './css-time';
|
|
12
|
+
export * from './css-time';
|
|
6
13
|
export { default as debounce } from './debounce';
|
|
14
|
+
export * from './debounce';
|
|
7
15
|
export { default as defineTranslations } from './define-translations';
|
|
16
|
+
export * from './define-translations';
|
|
8
17
|
export { default as devFlags } from './dev-flags';
|
|
18
|
+
export * from './dev-flags';
|
|
9
19
|
export { default as ensurePlaceholder } from './ensure-placeholder';
|
|
20
|
+
export * from './ensure-placeholder';
|
|
10
21
|
export { default as frame } from './frame';
|
|
22
|
+
export * from './frame';
|
|
11
23
|
export { default as isInside } from './is-inside';
|
|
24
|
+
export * from './is-inside';
|
|
12
25
|
export { default as kebabCase } from './kebab-case';
|
|
26
|
+
export * from './kebab-case';
|
|
13
27
|
export { default as listActive } from './list-active';
|
|
28
|
+
export * from './list-active';
|
|
14
29
|
export { default as microtask } from './microtask';
|
|
30
|
+
export * from './microtask';
|
|
31
|
+
export { default as nextAll } from './next-all';
|
|
32
|
+
export * from './next-all';
|
|
33
|
+
export { default as next } from './next';
|
|
34
|
+
export * from './next';
|
|
15
35
|
export { default as onoff } from './onoff';
|
|
36
|
+
export * from './onoff';
|
|
37
|
+
export { default as prevAll } from './prev-all';
|
|
38
|
+
export * from './prev-all';
|
|
39
|
+
export { default as prev } from './prev';
|
|
40
|
+
export * from './prev';
|
|
41
|
+
export { default as prop } from './prop';
|
|
42
|
+
export * from './prop';
|
|
16
43
|
export { default as set } from './set';
|
|
44
|
+
export * from './set';
|
|
45
|
+
export { default as siblings } from './siblings';
|
|
46
|
+
export * from './siblings';
|
|
17
47
|
export { default as sleep } from './sleep';
|
|
48
|
+
export * from './sleep';
|
|
18
49
|
export { default as slowHideShow } from './slow-hide-show';
|
|
50
|
+
export * from './slow-hide-show';
|
|
19
51
|
export { default as timeout } from './timeout';
|
|
52
|
+
export * from './timeout';
|
|
20
53
|
export { default as touchGlass } from './touch-glass';
|
|
54
|
+
export * from './touch-glass';
|
|
@@ -1,23 +1,54 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
export { default as $ } from './$';
|
|
2
|
+
export * from './$';
|
|
3
3
|
export { default as add } from './add';
|
|
4
|
-
export
|
|
4
|
+
export * from './add';
|
|
5
|
+
export { default as ancestors } from './ancestors';
|
|
6
|
+
export * from './ancestors';
|
|
5
7
|
export { default as clamp } from './clamp';
|
|
8
|
+
export * from './clamp';
|
|
6
9
|
export { default as compareBigDecimals } from './compare-big-decimals';
|
|
10
|
+
export * from './compare-big-decimals';
|
|
7
11
|
export { default as cssTime } from './css-time';
|
|
12
|
+
export * from './css-time';
|
|
8
13
|
export { default as debounce } from './debounce';
|
|
14
|
+
export * from './debounce';
|
|
9
15
|
export { default as defineTranslations } from './define-translations';
|
|
16
|
+
export * from './define-translations';
|
|
10
17
|
export { default as devFlags } from './dev-flags';
|
|
18
|
+
export * from './dev-flags';
|
|
11
19
|
export { default as ensurePlaceholder } from './ensure-placeholder';
|
|
20
|
+
export * from './ensure-placeholder';
|
|
12
21
|
export { default as frame } from './frame';
|
|
22
|
+
export * from './frame';
|
|
13
23
|
export { default as isInside } from './is-inside';
|
|
24
|
+
export * from './is-inside';
|
|
14
25
|
export { default as kebabCase } from './kebab-case';
|
|
26
|
+
export * from './kebab-case';
|
|
15
27
|
export { default as listActive } from './list-active';
|
|
28
|
+
export * from './list-active';
|
|
16
29
|
export { default as microtask } from './microtask';
|
|
30
|
+
export * from './microtask';
|
|
31
|
+
export { default as nextAll } from './next-all';
|
|
32
|
+
export * from './next-all';
|
|
33
|
+
export { default as next } from './next';
|
|
34
|
+
export * from './next';
|
|
17
35
|
export { default as onoff } from './onoff';
|
|
36
|
+
export * from './onoff';
|
|
37
|
+
export { default as prevAll } from './prev-all';
|
|
38
|
+
export * from './prev-all';
|
|
39
|
+
export { default as prev } from './prev';
|
|
40
|
+
export * from './prev';
|
|
41
|
+
export { default as prop } from './prop';
|
|
42
|
+
export * from './prop';
|
|
18
43
|
export { default as set } from './set';
|
|
44
|
+
export * from './set';
|
|
45
|
+
export { default as siblings } from './siblings';
|
|
46
|
+
export * from './siblings';
|
|
19
47
|
export { default as sleep } from './sleep';
|
|
48
|
+
export * from './sleep';
|
|
20
49
|
export { default as slowHideShow } from './slow-hide-show';
|
|
50
|
+
export * from './slow-hide-show';
|
|
21
51
|
export { default as timeout } from './timeout';
|
|
52
|
+
export * from './timeout';
|
|
22
53
|
export { default as touchGlass } from './touch-glass';
|
|
23
|
-
|
|
54
|
+
export * from './touch-glass';
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { DEBUG } from '../internal/flags.json' with { type: 'json' };
|
|
2
|
+
import { onoff } from '../internal/utils';
|
|
2
3
|
export class Snapshot {
|
|
3
4
|
static #readyCalled = false;
|
|
4
5
|
static #config;
|
|
@@ -45,12 +46,10 @@ export class Snapshot {
|
|
|
45
46
|
const mediaQueryList = self.matchMedia(`(pointer: fine) and (min-width: ${this.#config['ipad-sheet-view-inline-size']}) and (min-height: ${this.#config['ipad-sheet-view-height']})`);
|
|
46
47
|
this.#breakpoints = new Map([['fine_dialog_sheet', mediaQueryList.matches]]);
|
|
47
48
|
this.#listeners.add(onoff('change', (evt) => this.#handleMediaChange(evt, 'fine_dialog_sheet:change'), mediaQueryList).on());
|
|
48
|
-
|
|
49
|
-
console.debug(this.#config);
|
|
49
|
+
DEBUG && console.debug(this.#config);
|
|
50
50
|
}
|
|
51
51
|
static #handleMediaChange = ({ type, matches, media }, kind) => {
|
|
52
|
-
|
|
53
|
-
console.debug(`${Snapshot.name} ⚡️ ${type}`);
|
|
52
|
+
DEBUG && console.debug(`${Snapshot.name} ⚡️ ${type}`);
|
|
54
53
|
this.#breakpoints?.set('fine_dialog_sheet', matches);
|
|
55
54
|
this.on.dispatchEvent(new MediaQueryListEvent(kind, {
|
|
56
55
|
matches,
|