@swiftwc/ui 0.0.0-dev.96 → 0.0.0-dev.98
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/components/fine-tooltip.d.ts +3 -0
- package/generated/components/fine-tooltip.js +3 -0
- package/generated/components/label-view.d.ts +1 -1
- package/generated/components/label-view.js +1 -1
- package/generated/components/picker-view.d.ts +1 -1
- package/generated/components/picker-view.js +1 -1
- package/generated/components/progress-view.d.ts +0 -1
- package/generated/components/progress-view.js +2 -2
- package/generated/components/text-field.d.ts +1 -1
- package/generated/components/text-field.js +1 -1
- package/generated/components/toggle-view.d.ts +1 -1
- package/generated/components/toggle-view.js +1 -1
- package/generated/components/tool-bar-item.js +2 -2
- package/generated/components/v-stack.d.ts +1 -0
- package/generated/components/v-stack.js +1 -0
- package/generated/css/index.css +1481 -205
- package/generated/events/alert-dialog.d.ts +3 -0
- package/generated/events/confirmation-dialog.d.ts +3 -0
- package/generated/events/date-picker.d.ts +3 -0
- package/generated/events/lifecycle-observer.d.ts +4 -0
- package/generated/events/picker-view.d.ts +6 -0
- package/generated/events/scroll-view.d.ts +4 -0
- package/generated/events/tab-view.d.ts +10 -0
- package/generated/events/text-field.d.ts +3 -0
- package/generated/events/toggle-view.d.ts +3 -0
- package/package.json +1 -1
- package/scss/_maps.scss +19 -13
- package/scss/base/_root.scss +1 -1
- package/scss/components/_picker-view.scss +7 -1
- package/scss/components/_scroll-view-toolbars.scss +8 -2
- package/scss/components/_toggle-view.scss +2 -1
- package/scss/mixins/_index.scss +8 -2
- package/scss/placeholders/_lists.scss +27 -1
- package/scss/utils/_frame.scss +24 -47
- package/scss/utils/_stacks.scss +14 -3
- package/web-components.html-data/en.json +891 -76
|
@@ -2,6 +2,9 @@ var _a;
|
|
|
2
2
|
import { CleanupRegistry } from '../internal/class/cleanup-registry';
|
|
3
3
|
import { $, devFlags, onoff } from '../internal/utils';
|
|
4
4
|
import { html } from '../tpl';
|
|
5
|
+
/**
|
|
6
|
+
* @summary A tooltip that shows an unobtrusive helpful message on pointer:fine screens. Use it by adding a `help` attribute to any element.
|
|
7
|
+
*/
|
|
5
8
|
export class FineTooltip extends HTMLElement {
|
|
6
9
|
constructor() {
|
|
7
10
|
super();
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
* @slot icon — Use the `slot="icon"` attribute to place childen in the icon block.
|
|
13
13
|
*
|
|
14
14
|
* @cssprop --label-gap — The gap between the icon and the title.
|
|
15
|
-
* @cssprop --label-image-size — The size of the icon.
|
|
15
|
+
* @cssprop {number} --label-image-size — The size of the icon.
|
|
16
16
|
* @cssprop --label-padding-inline — The padding inline of the label.
|
|
17
17
|
*
|
|
18
18
|
*/
|
|
@@ -15,7 +15,7 @@ import { html } from '../tpl';
|
|
|
15
15
|
* @slot icon — Use the `slot="icon"` attribute to place childen in the icon block.
|
|
16
16
|
*
|
|
17
17
|
* @cssprop --label-gap — The gap between the icon and the title.
|
|
18
|
-
* @cssprop --label-image-size — The size of the icon.
|
|
18
|
+
* @cssprop {number} --label-image-size — The size of the icon.
|
|
19
19
|
* @cssprop --label-padding-inline — The padding inline of the label.
|
|
20
20
|
*
|
|
21
21
|
*/
|
|
@@ -23,7 +23,7 @@ export type Dictionary = DictEntry[];
|
|
|
23
23
|
* @slot — The default slot.
|
|
24
24
|
* @slot label
|
|
25
25
|
* @slot list
|
|
26
|
-
* @slot validity-options
|
|
26
|
+
* @slot {HTMLOptionElement[]} validity-options
|
|
27
27
|
*/
|
|
28
28
|
export declare class PickerView extends FormAssociatedBase {
|
|
29
29
|
#private;
|
|
@@ -129,7 +129,7 @@ const collectLeafValues = (node) => (node.children.length ? node.children.flatMa
|
|
|
129
129
|
* @slot — The default slot.
|
|
130
130
|
* @slot label
|
|
131
131
|
* @slot list
|
|
132
|
-
* @slot validity-options
|
|
132
|
+
* @slot {HTMLOptionElement[]} validity-options
|
|
133
133
|
*/
|
|
134
134
|
export class PickerView extends FormAssociatedBase {
|
|
135
135
|
static get ATTR() {
|
|
@@ -8,7 +8,6 @@ export declare class ProgressView extends HTMLElement {
|
|
|
8
8
|
#private;
|
|
9
9
|
static get observedAttributes(): string[];
|
|
10
10
|
get progressViewStyle(): "circular" | "linear";
|
|
11
|
-
get template(): DocumentFragment;
|
|
12
11
|
constructor();
|
|
13
12
|
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
14
13
|
disconnectedCallback(): void;
|
|
@@ -25,7 +25,7 @@ export class ProgressView extends HTMLElement {
|
|
|
25
25
|
get progressViewStyle() {
|
|
26
26
|
return this.#progressViewStyle ?? 'circular';
|
|
27
27
|
}
|
|
28
|
-
get template() {
|
|
28
|
+
get #template() {
|
|
29
29
|
if (!_a.#templates.has(this.progressViewStyle))
|
|
30
30
|
switch (this.progressViewStyle) {
|
|
31
31
|
case 'linear':
|
|
@@ -109,7 +109,7 @@ export class ProgressView extends HTMLElement {
|
|
|
109
109
|
if (this.#lastRenderedStyle === this.#progressViewStyle)
|
|
110
110
|
return; // skip if already applied
|
|
111
111
|
this.#lastRenderedStyle = this.#progressViewStyle;
|
|
112
|
-
this.#shadowRoot.replaceChildren(document.importNode(this
|
|
112
|
+
this.#shadowRoot.replaceChildren(document.importNode(this.#template, true)); // clear shadow DOM
|
|
113
113
|
CleanupRegistry.unregister(this, 'slots');
|
|
114
114
|
for (const slot of this.#shadowRoot.querySelectorAll('slot'))
|
|
115
115
|
this.#slots?.set(slot.name, slot);
|
|
@@ -7,7 +7,7 @@ export type KeyboardType = (typeof keyboardTypes)[number];
|
|
|
7
7
|
* @fires {{ detail: { text: string } }} commit — Triggered when user interacts with the input area
|
|
8
8
|
*
|
|
9
9
|
* @slot label
|
|
10
|
-
* @slot validity-options
|
|
10
|
+
* @slot {HTMLOptionElement[]} validity-options
|
|
11
11
|
*/
|
|
12
12
|
export declare class TextField extends FormAssociatedBase {
|
|
13
13
|
#private;
|
|
@@ -13,7 +13,7 @@ const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
|
|
|
13
13
|
* @fires {{ detail: { text: string } }} commit — Triggered when user interacts with the input area
|
|
14
14
|
*
|
|
15
15
|
* @slot label
|
|
16
|
-
* @slot validity-options
|
|
16
|
+
* @slot {HTMLOptionElement[]} validity-options
|
|
17
17
|
*/
|
|
18
18
|
export class TextField extends FormAssociatedBase {
|
|
19
19
|
static get observedAttributes() {
|
|
@@ -7,7 +7,7 @@ export type ToggleStyle = (typeof toggleStyles)[number];
|
|
|
7
7
|
* @fires toggle:change — User toggled the control
|
|
8
8
|
*
|
|
9
9
|
* @slot label
|
|
10
|
-
* @slot validity-options
|
|
10
|
+
* @slot {HTMLOptionElement[]} validity-options
|
|
11
11
|
*/
|
|
12
12
|
export declare class ToggleView extends FormAssociatedBase {
|
|
13
13
|
#private;
|
|
@@ -12,7 +12,7 @@ const toggleStyles = ['switch', 'button'];
|
|
|
12
12
|
* @fires toggle:change — User toggled the control
|
|
13
13
|
*
|
|
14
14
|
* @slot label
|
|
15
|
-
* @slot validity-options
|
|
15
|
+
* @slot {HTMLOptionElement[]} validity-options
|
|
16
16
|
*/
|
|
17
17
|
export class ToggleView extends FormAssociatedBase {
|
|
18
18
|
static get observedAttributes() {
|
|
@@ -31,11 +31,11 @@ let ToolBarItem = ToolBarItem_1 = class ToolBarItem extends HTMLElement {
|
|
|
31
31
|
const role = this.getAttribute('data-previous-slot') ?? this.getAttribute('slot') ?? '', tKey = this.getAttribute('title-key');
|
|
32
32
|
if (['confirmation-action', 'cancellation-action'].includes(role))
|
|
33
33
|
Snapshot.waitReady.then(() => {
|
|
34
|
-
ensurePlaceholder(this.querySelector(':scope>button'), role, tKey, Snapshot.config);
|
|
34
|
+
ensurePlaceholder(this.querySelector(':scope>button:not(:has(> :not([slot])))'), role, tKey, Snapshot.config);
|
|
35
35
|
this.#mutationObserver = new MutationObserver((mutations) => {
|
|
36
36
|
for (const { target } of mutations)
|
|
37
37
|
if (target instanceof HTMLElement)
|
|
38
|
-
ensurePlaceholder(this.querySelector(':scope>button'), role, tKey, Snapshot.config);
|
|
38
|
+
ensurePlaceholder(this.querySelector(':scope>button:not(:has(> :not([slot])))'), role, tKey, Snapshot.config);
|
|
39
39
|
});
|
|
40
40
|
this.#mutationObserver.observe(this, {
|
|
41
41
|
childList: true,
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @summary A view that arranges its children one on top of the other.
|
|
3
3
|
*
|
|
4
|
+
* @attr {@FrameInlineLength} readable — Shortcut for `placement="leading fill" frame:alignment="center" frame:width="infinity" frame:max-width="{length}"`
|
|
4
5
|
* @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution — The distribution of cols
|
|
5
6
|
*
|
|
6
7
|
* @attr {@Template} template — The main-axis grid template
|
|
@@ -2,6 +2,7 @@ import { devFlags } from '../internal/utils';
|
|
|
2
2
|
/**
|
|
3
3
|
* @summary A view that arranges its children one on top of the other.
|
|
4
4
|
*
|
|
5
|
+
* @attr {@FrameInlineLength} readable — Shortcut for `placement="leading fill" frame:alignment="center" frame:width="infinity" frame:max-width="{length}"`
|
|
5
6
|
* @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution — The distribution of cols
|
|
6
7
|
*
|
|
7
8
|
* @attr {@Template} template — The main-axis grid template
|