@swiftwc/ui 0.0.0-dev.38 → 0.0.0-dev.39
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 -3
- package/generated/components/alert-dialog.js +17 -9
- package/generated/components/body-view.js +5 -3
- package/generated/components/bordered-button.js +7 -4
- package/generated/components/bordered-prominent-button.js +7 -4
- package/generated/components/borderless-button.js +7 -4
- package/generated/components/confirmation-dialog.js +17 -9
- package/generated/components/content-unavailable-view.js +7 -4
- package/generated/components/date-picker.js +32 -19
- package/generated/components/disclosure-group.js +9 -5
- package/generated/components/fine-tooltip.js +7 -4
- package/generated/components/form-view.js +5 -3
- package/generated/components/glass-button.js +7 -4
- package/generated/components/glass-prominent-button.js +7 -4
- package/generated/components/label-view.js +7 -4
- package/generated/components/list-view.js +5 -3
- package/generated/components/menu-view.js +19 -10
- package/generated/components/navigation-large-title.js +9 -5
- package/generated/components/navigation-split-view.js +7 -4
- package/generated/components/navigation-stack.js +7 -4
- package/generated/components/navigation-title.js +7 -4
- package/generated/components/picker-view.d.ts +1 -0
- package/generated/components/picker-view.js +181 -77
- package/generated/components/plain-button.js +5 -3
- package/generated/components/progress-view.js +11 -6
- package/generated/components/screen-view.js +3 -2
- package/generated/components/scroll-view-proxy.js +5 -3
- package/generated/components/scroll-view.js +17 -9
- package/generated/components/search-view.js +7 -4
- package/generated/components/section-view.js +7 -4
- package/generated/components/sheet-view.js +11 -6
- package/generated/components/sidebar-toggle.js +9 -5
- package/generated/components/sidebar-view.js +3 -2
- package/generated/components/sticky-container.js +5 -3
- package/generated/components/tab-bar.js +7 -4
- package/generated/components/tab-item.js +15 -8
- package/generated/components/tab-view.js +14 -8
- package/generated/components/table-view.js +11 -6
- package/generated/components/text-field.js +25 -15
- package/generated/components/tool-bar-item-group.js +5 -3
- package/generated/components/tool-bar-item.js +7 -4
- package/generated/components/tool-bar.js +7 -4
- package/generated/components/v-keyboard.js +9 -5
- package/generated/components/v-stack.js +5 -3
- package/generated/css/index.css +6 -2
- package/generated/events/picker-view.d.ts +1 -0
- package/generated/internal/class/css-style-observer.js +3 -2
- package/generated/internal/class/form-associated-base.js +7 -5
- package/generated/internal/class/navigation-view.js +5 -3
- package/generated/internal/decorators/adaptive-slot.js +7 -4
- package/generated/internal/privateNamespace.js +22 -13
- package/generated/internal/utils/dev-flags.d.ts +3 -0
- package/generated/internal/utils/dev-flags.js +5 -0
- package/generated/internal/utils/index.d.ts +1 -1
- package/generated/internal/utils/index.js +1 -1
- package/generated/snapshot/index.js +5 -3
- package/package.json +1 -1
- package/scss/base/_layout.scss +6 -7
- package/generated/internal/utils/debug.d.ts +0 -1
- package/generated/internal/utils/debug.js +0 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CleanupRegistry } from '../internal/class/cleanup-registry';
|
|
2
|
-
import {
|
|
2
|
+
import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
|
|
3
3
|
import { ButtonBase } from '../namespace-browser/base';
|
|
4
4
|
import { Snapshot } from '../snapshot';
|
|
5
5
|
/**
|
|
@@ -14,16 +14,19 @@ export class GlassProminentButton extends ButtonBase {
|
|
|
14
14
|
super();
|
|
15
15
|
}
|
|
16
16
|
static polyfillDisconnectedCallback(el) {
|
|
17
|
-
|
|
17
|
+
if (devFlags.debug)
|
|
18
|
+
console.debug(`${GlassProminentButton.name} ⚡️ disconnect`);
|
|
18
19
|
CleanupRegistry.unregister(el);
|
|
19
20
|
}
|
|
20
21
|
static polyfillConnectedCallback(el) {
|
|
21
|
-
|
|
22
|
+
if (devFlags.debug)
|
|
23
|
+
console.debug(`${GlassProminentButton.name} ⚡️ connect`);
|
|
22
24
|
CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, () => true), el).on());
|
|
23
25
|
el.tabIndex = 0;
|
|
24
26
|
}
|
|
25
27
|
static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
|
|
26
|
-
|
|
28
|
+
if (devFlags.debug)
|
|
29
|
+
console.debug(`${GlassProminentButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
|
|
27
30
|
const node = target instanceof HTMLButtonElement && target;
|
|
28
31
|
if (!node)
|
|
29
32
|
return;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { $,
|
|
1
|
+
import { $, devFlags } from '../internal/utils';
|
|
2
2
|
export class LabelView extends HTMLElement {
|
|
3
3
|
static get observedAttributes() {
|
|
4
4
|
return ['system-image', 'title', 'line-limit', 'truncation-mode'];
|
|
@@ -25,13 +25,16 @@ export class LabelView extends HTMLElement {
|
|
|
25
25
|
this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
|
|
26
26
|
}
|
|
27
27
|
disconnectedCallback() {
|
|
28
|
-
|
|
28
|
+
if (devFlags.debug)
|
|
29
|
+
console.debug(`${LabelView.name} ⚡️ disconnect`);
|
|
29
30
|
}
|
|
30
31
|
connectedCallback() {
|
|
31
|
-
|
|
32
|
+
if (devFlags.debug)
|
|
33
|
+
console.debug(`${LabelView.name} ⚡️ connect`);
|
|
32
34
|
}
|
|
33
35
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
34
|
-
|
|
36
|
+
if (devFlags.debug)
|
|
37
|
+
console.debug(`${LabelView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
|
|
35
38
|
switch (name) {
|
|
36
39
|
case 'system-image':
|
|
37
40
|
let image = this.querySelector(':scope>[slot=image]');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CleanupRegistry } from '../internal/class/cleanup-registry';
|
|
2
|
-
import {
|
|
2
|
+
import { devFlags, listActive, onoff } from '../internal/utils';
|
|
3
3
|
export class ListView extends HTMLElement {
|
|
4
4
|
// static #template: DocumentFragment
|
|
5
5
|
// static get template() {
|
|
@@ -17,11 +17,13 @@ export class ListView extends HTMLElement {
|
|
|
17
17
|
// this.#shadowRoot.appendChild(document.importNode((this.constructor as typeof ListView).template, true))
|
|
18
18
|
}
|
|
19
19
|
disconnectedCallback() {
|
|
20
|
-
|
|
20
|
+
if (devFlags.debug)
|
|
21
|
+
console.debug(`${ListView.name} ⚡️ disconnect`);
|
|
21
22
|
CleanupRegistry.unregister(this);
|
|
22
23
|
}
|
|
23
24
|
connectedCallback() {
|
|
24
|
-
|
|
25
|
+
if (devFlags.debug)
|
|
26
|
+
console.debug(`${ListView.name} ⚡️ connect`);
|
|
25
27
|
CleanupRegistry.register(this, onoff(listActive(this), this).on());
|
|
26
28
|
}
|
|
27
29
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
var _a;
|
|
2
2
|
import { CleanupRegistry } from '../internal/class/cleanup-registry';
|
|
3
|
-
import { $,
|
|
3
|
+
import { $, devFlags, onoff, touchGlass } from '../internal/utils';
|
|
4
4
|
export class MenuView extends HTMLElement {
|
|
5
5
|
static get observedAttributes() {
|
|
6
6
|
return ['open', 'closing', 'label'];
|
|
@@ -27,7 +27,8 @@ export class MenuView extends HTMLElement {
|
|
|
27
27
|
this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
|
|
28
28
|
}
|
|
29
29
|
disconnectedCallback() {
|
|
30
|
-
|
|
30
|
+
if (devFlags.debug)
|
|
31
|
+
console.debug(`${_a.name} ⚡️ disconnect`);
|
|
31
32
|
// const dialog = this.#shadowRoot.querySelector('dialog'),
|
|
32
33
|
// trigger = this.#shadowRoot.querySelector('button')
|
|
33
34
|
// trigger?.removeEventListener('click', this.#handleTriggerClick)
|
|
@@ -40,7 +41,8 @@ export class MenuView extends HTMLElement {
|
|
|
40
41
|
CleanupRegistry.unregister(this);
|
|
41
42
|
}
|
|
42
43
|
connectedCallback() {
|
|
43
|
-
|
|
44
|
+
if (devFlags.debug)
|
|
45
|
+
console.debug(`${_a.name} ⚡️ connect`);
|
|
44
46
|
this.#dialog = this.#shadowRoot.querySelector('dialog') ?? undefined;
|
|
45
47
|
const trigger = this.#shadowRoot.querySelector('button') ?? undefined;
|
|
46
48
|
CleanupRegistry.register(this, onoff('click', this.#handleTriggerClick, trigger).on());
|
|
@@ -64,14 +66,16 @@ export class MenuView extends HTMLElement {
|
|
|
64
66
|
dialogPart?.style.setProperty('position-anchor', newAnchorName); // $.prop('position-anchor', newAnchorName, dialogPart) //
|
|
65
67
|
}
|
|
66
68
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
67
|
-
|
|
69
|
+
if (devFlags.debug)
|
|
70
|
+
console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
|
|
68
71
|
switch (name) {
|
|
69
72
|
case 'open':
|
|
70
73
|
if (!this.#dialog)
|
|
71
74
|
break;
|
|
72
75
|
this.#dialog.inert = null === newValue;
|
|
73
76
|
if (null === newValue && this.#dialog.open) {
|
|
74
|
-
|
|
77
|
+
if (devFlags.debug)
|
|
78
|
+
console.debug(`${_a.name} ⚡️ will-close`);
|
|
75
79
|
this.setAttribute('closing', '');
|
|
76
80
|
Promise.allSettled(this.#dialog.getAnimations().map(({ finished }) => finished)).then(() => {
|
|
77
81
|
if (!this.hasAttribute('closing'))
|
|
@@ -81,7 +85,8 @@ export class MenuView extends HTMLElement {
|
|
|
81
85
|
});
|
|
82
86
|
}
|
|
83
87
|
if ('' === newValue && !this.#dialog.open) {
|
|
84
|
-
|
|
88
|
+
if (devFlags.debug)
|
|
89
|
+
console.debug(`${_a.name} ⚡️ will-open`);
|
|
85
90
|
this.removeAttribute('closing');
|
|
86
91
|
const form = this.#shadowRoot.querySelector('form');
|
|
87
92
|
form.scrollTop = 0;
|
|
@@ -100,7 +105,8 @@ export class MenuView extends HTMLElement {
|
|
|
100
105
|
}
|
|
101
106
|
}
|
|
102
107
|
#handleDialogClick = ({ type, target }) => {
|
|
103
|
-
|
|
108
|
+
if (devFlags.debug)
|
|
109
|
+
console.debug(`${_a.name} ⚡️ ${type}`);
|
|
104
110
|
if (!(target instanceof HTMLElement && target))
|
|
105
111
|
return;
|
|
106
112
|
if (target.matches('dialog'))
|
|
@@ -117,19 +123,22 @@ export class MenuView extends HTMLElement {
|
|
|
117
123
|
// event.stopPropagation() //NOTE: add this only if not nested, disposes all nicely if ommited
|
|
118
124
|
};
|
|
119
125
|
#handleTriggerClick = (evt) => {
|
|
120
|
-
|
|
126
|
+
if (devFlags.debug)
|
|
127
|
+
console.debug(`${_a.name} ⚡️ ${evt?.type}`);
|
|
121
128
|
this.toggleAttribute('open', true);
|
|
122
129
|
};
|
|
123
130
|
// intercept to modify open attr
|
|
124
131
|
#handleDialogCancel = (evt) => {
|
|
125
|
-
|
|
132
|
+
if (devFlags.debug)
|
|
133
|
+
console.debug(`${_a.name} ⚡️ ${evt?.type}`);
|
|
126
134
|
if (!evt.cancelable)
|
|
127
135
|
return;
|
|
128
136
|
evt.preventDefault();
|
|
129
137
|
this.toggleAttribute('open', false);
|
|
130
138
|
};
|
|
131
139
|
#handleDialogClose = (evt) => {
|
|
132
|
-
|
|
140
|
+
if (devFlags.debug)
|
|
141
|
+
console.debug(`${_a.name} ⚡️ ${evt?.type}`);
|
|
133
142
|
this.toggleAttribute('open', this.#shadowRoot.querySelector('dialog')?.open ?? false);
|
|
134
143
|
};
|
|
135
144
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var _a;
|
|
2
2
|
import { CleanupRegistry } from '../internal/class/cleanup-registry';
|
|
3
3
|
import { CSSStyleObserver } from '../internal/class/css-style-observer';
|
|
4
|
-
import { add,
|
|
4
|
+
import { add, devFlags, frame, onoff, slowHideShow, timeout } from '../internal/utils';
|
|
5
5
|
import { Snapshot } from '../snapshot';
|
|
6
6
|
const observing = new WeakSet();
|
|
7
7
|
function observeResizeEnd(el, callback, stableFrames = 4) {
|
|
@@ -76,13 +76,15 @@ export class NavigationLargeTitle extends HTMLElement {
|
|
|
76
76
|
super();
|
|
77
77
|
}
|
|
78
78
|
disconnectedCallback() {
|
|
79
|
-
|
|
79
|
+
if (devFlags.debug)
|
|
80
|
+
console.debug(`${_a.name} ⚡️ disconnect`);
|
|
80
81
|
this.#clearScrollState();
|
|
81
82
|
this.#styleObserver?.disconnect();
|
|
82
83
|
CleanupRegistry.unregister(this);
|
|
83
84
|
}
|
|
84
85
|
connectedCallback() {
|
|
85
|
-
|
|
86
|
+
if (devFlags.debug)
|
|
87
|
+
console.debug(`${_a.name} ⚡️ connect`);
|
|
86
88
|
const root = this.closest('scroll-view') ?? undefined;
|
|
87
89
|
if (!root)
|
|
88
90
|
return;
|
|
@@ -105,7 +107,8 @@ export class NavigationLargeTitle extends HTMLElement {
|
|
|
105
107
|
});
|
|
106
108
|
}
|
|
107
109
|
#handleStyleChange = () => {
|
|
108
|
-
|
|
110
|
+
if (devFlags.debug)
|
|
111
|
+
console.debug(`${_a.name} ⚡️ style`);
|
|
109
112
|
const root = this.closest('scroll-view') ?? undefined;
|
|
110
113
|
if (!root)
|
|
111
114
|
return;
|
|
@@ -150,7 +153,8 @@ export class NavigationLargeTitle extends HTMLElement {
|
|
|
150
153
|
// this.#applySlowness(root, isIntersecting)
|
|
151
154
|
// }
|
|
152
155
|
#handleIntersect = (entries, { root }) => {
|
|
153
|
-
|
|
156
|
+
if (devFlags.debug)
|
|
157
|
+
console.debug(`${_a.name} ⚡️ intersect (${entries?.at(0)?.isIntersecting})`);
|
|
154
158
|
if (!(root instanceof HTMLElement))
|
|
155
159
|
return;
|
|
156
160
|
for (const { isIntersecting } of entries)
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { NavigationView } from '../internal/class/navigation-view';
|
|
2
|
-
import {
|
|
2
|
+
import { devFlags } from '../internal/utils';
|
|
3
3
|
/**
|
|
4
4
|
* @summary A view with two or three side-by-side sections, where what you choose in the left section changes what appears in the next section.
|
|
5
5
|
*/
|
|
@@ -8,15 +8,18 @@ export class NavigationSplitView extends NavigationView {
|
|
|
8
8
|
super();
|
|
9
9
|
}
|
|
10
10
|
disconnectedCallback() {
|
|
11
|
-
|
|
11
|
+
if (devFlags.debug)
|
|
12
|
+
console.debug(`${NavigationSplitView.name} ⚡️ disconnect`);
|
|
12
13
|
super.disconnectedCallback();
|
|
13
14
|
}
|
|
14
15
|
connectedCallback() {
|
|
15
|
-
|
|
16
|
+
if (devFlags.debug)
|
|
17
|
+
console.debug(`${NavigationSplitView.name} ⚡️ connect`);
|
|
16
18
|
super.connectedCallback();
|
|
17
19
|
}
|
|
18
20
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
19
|
-
|
|
21
|
+
if (devFlags.debug)
|
|
22
|
+
console.debug(`${NavigationSplitView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
|
|
20
23
|
super.attributeChangedCallback(name, oldValue, newValue);
|
|
21
24
|
}
|
|
22
25
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { NavigationView } from '../internal/class/navigation-view';
|
|
2
|
-
import {
|
|
2
|
+
import { devFlags } from '../internal/utils';
|
|
3
3
|
/**
|
|
4
4
|
* @summary A view that shows a main screen and lets you open other screens on top of it.
|
|
5
5
|
*/
|
|
@@ -8,15 +8,18 @@ export class NavigationStack extends NavigationView {
|
|
|
8
8
|
super();
|
|
9
9
|
}
|
|
10
10
|
disconnectedCallback() {
|
|
11
|
-
|
|
11
|
+
if (devFlags.debug)
|
|
12
|
+
console.debug(`${NavigationStack.name} ⚡️ disconnect`);
|
|
12
13
|
super.disconnectedCallback();
|
|
13
14
|
}
|
|
14
15
|
connectedCallback() {
|
|
15
|
-
|
|
16
|
+
if (devFlags.debug)
|
|
17
|
+
console.debug(`${NavigationStack.name} ⚡️ connect`);
|
|
16
18
|
super.connectedCallback();
|
|
17
19
|
}
|
|
18
20
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
19
|
-
|
|
21
|
+
if (devFlags.debug)
|
|
22
|
+
console.debug(`${NavigationStack.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
|
|
20
23
|
super.attributeChangedCallback(name, oldValue, newValue);
|
|
21
24
|
// Snapshot.waitReady.then(() => {
|
|
22
25
|
switch (name) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { $,
|
|
1
|
+
import { $, devFlags } from '../internal/utils';
|
|
2
2
|
export class NavigationTitle extends HTMLElement {
|
|
3
3
|
static get observedAttributes() {
|
|
4
4
|
return ['value', 'subtitle'];
|
|
@@ -7,13 +7,16 @@ export class NavigationTitle extends HTMLElement {
|
|
|
7
7
|
super();
|
|
8
8
|
}
|
|
9
9
|
disconnectedCallback() {
|
|
10
|
-
|
|
10
|
+
if (devFlags.debug)
|
|
11
|
+
console.debug(`${NavigationTitle.name} ⚡️ disconnect`);
|
|
11
12
|
}
|
|
12
13
|
connectedCallback() {
|
|
13
|
-
|
|
14
|
+
if (devFlags.debug)
|
|
15
|
+
console.debug(`${NavigationTitle.name} ⚡️ connect`);
|
|
14
16
|
}
|
|
15
17
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
16
|
-
|
|
18
|
+
if (devFlags.debug)
|
|
19
|
+
console.debug(`${NavigationTitle.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
|
|
17
20
|
const sibling = this.closest('scroll-view') ?? undefined;
|
|
18
21
|
switch (name) {
|
|
19
22
|
case 'value':
|