@swiftwc/ui 0.0.0-dev.17 → 0.0.0-dev.18
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/index.d.ts +1 -0
- package/generated/components/index.js +1 -0
- package/generated/components/scroll-view-proxy.d.ts +8 -0
- package/generated/components/scroll-view-proxy.js +14 -0
- package/generated/components/sidebar-toggle.js +33 -60
- package/generated/css/index.css +72 -66
- package/generated/internal/utils/list-active.js +11 -11
- package/package.json +1 -1
- package/scss/components/_components.scss +76 -0
- package/scss/components/_h-flex-stack.scss +23 -0
- package/scss/components/_h-stack.scss +2 -2
- package/scss/components/_scroll-view-proxy.scss +18 -18
- package/scss/components/_v-stack.scss +2 -2
- package/scss/final/_touch-glass.scss +17 -0
- package/scss/utils/_stacks.scss +68 -67
|
@@ -21,6 +21,7 @@ export * from './navigation-title';
|
|
|
21
21
|
export * from './picker-view';
|
|
22
22
|
export * from './plain-button';
|
|
23
23
|
export * from './screen-view';
|
|
24
|
+
export * from './scroll-view-proxy';
|
|
24
25
|
export * from './scroll-view';
|
|
25
26
|
export * from './section-view';
|
|
26
27
|
export * from './sheet-view';
|
|
@@ -21,6 +21,7 @@ export * from './navigation-title';
|
|
|
21
21
|
export * from './picker-view';
|
|
22
22
|
export * from './plain-button';
|
|
23
23
|
export * from './screen-view';
|
|
24
|
+
export * from './scroll-view-proxy';
|
|
24
25
|
export * from './scroll-view';
|
|
25
26
|
export * from './section-view';
|
|
26
27
|
export * from './sheet-view';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @summary A wrapper to {hv}-stacks
|
|
3
|
+
*/
|
|
4
|
+
export class ScrollViewProxy extends HTMLElement {
|
|
5
|
+
constructor() {
|
|
6
|
+
super();
|
|
7
|
+
}
|
|
8
|
+
disconnectedCallback() {
|
|
9
|
+
console.debug(`${ScrollViewProxy.name} ⚡️ disconnect`);
|
|
10
|
+
}
|
|
11
|
+
connectedCallback() {
|
|
12
|
+
console.debug(`${ScrollViewProxy.name} ⚡️ connect`);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -1,19 +1,11 @@
|
|
|
1
1
|
var _a;
|
|
2
2
|
import { CleanupRegistry } from '../internal/class/cleanup-registry';
|
|
3
3
|
import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
|
|
4
|
-
import {
|
|
4
|
+
import { debounce, onoff } from '../internal/utils';
|
|
5
5
|
const observers = new ResizeObserverSingleton();
|
|
6
6
|
export class SidebarToggle extends HTMLElement {
|
|
7
|
-
// #ro
|
|
8
|
-
// #io
|
|
9
7
|
constructor() {
|
|
10
8
|
super();
|
|
11
|
-
// this.#ro = new ResizeObserver(
|
|
12
|
-
// debounce(this.#handleMeasure.bind(this), 100, true)
|
|
13
|
-
// )
|
|
14
|
-
// this.#io = new IntersectionObserver((entries) => {
|
|
15
|
-
// this._checkVisibility2(entries)
|
|
16
|
-
// })
|
|
17
9
|
}
|
|
18
10
|
connectedCallback() {
|
|
19
11
|
console.debug(`${_a.name} ⚡️ connect`);
|
|
@@ -21,18 +13,13 @@ export class SidebarToggle extends HTMLElement {
|
|
|
21
13
|
const entry = {
|
|
22
14
|
target: this,
|
|
23
15
|
};
|
|
24
|
-
// NOTE: wait for config
|
|
25
|
-
// Snapshot.waitReady.then(() => {
|
|
26
16
|
observers.observe(this, debounce(_a.#handleMeasure, 100, true)); //this.#ro?.observe(this)
|
|
27
|
-
// this.#io.observe(this)
|
|
28
17
|
// @ts-expect-error
|
|
29
18
|
_a.#handleMeasure([entry]);
|
|
30
|
-
// })
|
|
31
19
|
}
|
|
32
20
|
disconnectedCallback() {
|
|
33
21
|
console.debug(`${_a.name} ⚡️ disconnect`);
|
|
34
|
-
observers.unobserve(this);
|
|
35
|
-
// this.#io.disconnect()
|
|
22
|
+
observers.unobserve(this);
|
|
36
23
|
CleanupRegistry.unregister(this);
|
|
37
24
|
}
|
|
38
25
|
static query(target) {
|
|
@@ -42,62 +29,48 @@ export class SidebarToggle extends HTMLElement {
|
|
|
42
29
|
// This triggers on show/hide of any of sidebar-toggle elements
|
|
43
30
|
static #handleMeasure(entry) {
|
|
44
31
|
console.debug(`${_a.name} ⚡️ measure`);
|
|
45
|
-
const target = entry
|
|
32
|
+
const { target } = entry ?? {};
|
|
33
|
+
if (!(target instanceof HTMLElement))
|
|
34
|
+
return;
|
|
46
35
|
// set/remove css var/prop to parent based on shown/hidden
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
//
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
36
|
+
const tv = target.parentElement;
|
|
37
|
+
// inlineSize = entry.borderBoxSize?.at(0)?.inlineSize ?? entry.contentRect?.width ?? 0,
|
|
38
|
+
// blockSize = entry.borderBoxSize?.at(0)?.blockSize ?? entry.contentRect?.height ?? 0
|
|
39
|
+
self.requestAnimationFrame(() => {
|
|
40
|
+
const inlineSize = target.offsetWidth ?? 0;
|
|
41
|
+
if (0 < inlineSize)
|
|
42
|
+
tv?.style?.setProperty?.('--sidebar-toggle-padding-inline-start', `${inlineSize}px`); //$.prop('--sidebar-toggle-padding-inline-start', `${inlineSize}px`, tv) //
|
|
43
|
+
else
|
|
44
|
+
tv?.style?.removeProperty?.('--sidebar-toggle-padding-inline-start'); //$.prop('--sidebar-toggle-padding-inline-start', null, tv) //
|
|
45
|
+
});
|
|
57
46
|
// auto close IF open
|
|
58
|
-
// for (const { target } of entries) {
|
|
59
47
|
const { container, sideBar } = _a.query(target); //target?.closest('navigation-split-view,tab-view')
|
|
60
|
-
// const sideBar = container?.querySelector<HTMLDialogElement>(':scope > dialog[is=sidebar-view]')
|
|
61
48
|
if (!sideBar?.open)
|
|
62
49
|
return;
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
break;
|
|
81
|
-
}
|
|
82
|
-
sideBar?.close?.();
|
|
83
|
-
// }
|
|
50
|
+
self.requestAnimationFrame(() => {
|
|
51
|
+
switch (container?.tagName) {
|
|
52
|
+
case 'NAVIGATION-SPLIT-VIEW':
|
|
53
|
+
if (0 < target.offsetWidth && 0 < target.offsetHeight)
|
|
54
|
+
return;
|
|
55
|
+
break;
|
|
56
|
+
case 'TAB-VIEW':
|
|
57
|
+
// scan all toggles for anyone that is visible, sign that sidebar should stay open
|
|
58
|
+
if ([
|
|
59
|
+
...container.querySelectorAll(':scope > sidebar-toggle,:scope > [is=tab-bar] > sidebar-toggle' //,:scope > [is='sidebar-view'] > tool-bar > sidebar-toggle" ?? FIXME: removed this bc/ inside sidebar!
|
|
60
|
+
),
|
|
61
|
+
].some(({ offsetWidth, offsetHeight }) => 0 < offsetWidth && 0 < offsetHeight))
|
|
62
|
+
return;
|
|
63
|
+
break;
|
|
64
|
+
}
|
|
65
|
+
sideBar?.close?.();
|
|
66
|
+
});
|
|
84
67
|
}
|
|
85
|
-
// _checkVisibility2(entries) {
|
|
86
|
-
// entries.forEach((entry) => {
|
|
87
|
-
// console.log('Visible in viewport?', entry.isIntersecting)
|
|
88
|
-
// })
|
|
89
|
-
// }
|
|
90
68
|
#handleClick(evt) {
|
|
91
69
|
console.debug(`${_a.name} ⚡️ ${evt?.type}`);
|
|
92
|
-
const target = evt
|
|
70
|
+
const { target } = evt;
|
|
93
71
|
if (!target?.closest('button'))
|
|
94
72
|
return;
|
|
95
73
|
const { sideBar } = _a.query(target);
|
|
96
|
-
// const container = target?.closest('tab-view,navigation-split-view')
|
|
97
|
-
// const dialog =
|
|
98
|
-
// 'TAB-VIEW' === container?.tagName
|
|
99
|
-
// ? container.querySelector<TabBar>('dialog[is="tab-bar"]')
|
|
100
|
-
// : container?.querySelector<SidebarView>('dialog[is="sidebar-view"]')
|
|
101
74
|
if (!sideBar?.open)
|
|
102
75
|
sideBar?.showModal();
|
|
103
76
|
else
|
package/generated/css/index.css
CHANGED
|
@@ -1723,32 +1723,14 @@
|
|
|
1723
1723
|
scroll-view-proxy:has(> v-stack, > h-stack) > h-stack[distribution=leading] > :not([slot])) {
|
|
1724
1724
|
scroll-snap-align: start;
|
|
1725
1725
|
}
|
|
1726
|
-
:where(scroll-view-proxy:has(> v-stack, > h-stack) > v-stack,
|
|
1727
|
-
scroll-view-proxy:has(> v-stack, > h-stack) > h-stack)::before {
|
|
1728
|
-
grid-column: 1/-1;
|
|
1729
|
-
grid-row: 1/-1;
|
|
1730
|
-
content: "";
|
|
1731
|
-
display: inline-grid;
|
|
1732
|
-
block-size: 1px;
|
|
1733
|
-
inline-size: 1px;
|
|
1734
|
-
z-index: -1;
|
|
1735
|
-
pointer-events: none;
|
|
1736
|
-
position: absolute;
|
|
1737
|
-
}
|
|
1738
1726
|
:where(scroll-view-proxy:has(> v-stack, > h-stack) > v-stack) {
|
|
1739
1727
|
overflow: clip auto;
|
|
1740
1728
|
scroll-snap-type: block mandatory;
|
|
1741
1729
|
}
|
|
1742
|
-
:where(scroll-view-proxy:has(> v-stack, > h-stack) > v-stack)::before {
|
|
1743
|
-
block-size: calc(100cqb + 1px);
|
|
1744
|
-
}
|
|
1745
1730
|
:where(scroll-view-proxy:has(> v-stack, > h-stack) > h-stack) {
|
|
1746
1731
|
overflow: auto clip;
|
|
1747
1732
|
scroll-snap-type: inline mandatory;
|
|
1748
1733
|
}
|
|
1749
|
-
:where(scroll-view-proxy:has(> v-stack, > h-stack) > h-stack)::before {
|
|
1750
|
-
inline-size: calc(100cqi + 1px);
|
|
1751
|
-
}
|
|
1752
1734
|
:where(scroll-view-proxy:has(> v-stack, > h-stack) > h-stack[padding]) {
|
|
1753
1735
|
scroll-padding-inline: 1rem;
|
|
1754
1736
|
}
|
|
@@ -1757,8 +1739,8 @@
|
|
|
1757
1739
|
:where(h-stack) {
|
|
1758
1740
|
grid-auto-flow: column;
|
|
1759
1741
|
grid-template-rows: minmax(0, 1fr);
|
|
1760
|
-
place-items: center;
|
|
1761
|
-
place-content: center;
|
|
1742
|
+
place-items: safe center;
|
|
1743
|
+
place-content: safe center;
|
|
1762
1744
|
gap: 1rem;
|
|
1763
1745
|
}
|
|
1764
1746
|
:where(h-stack[template="minmax(0,1fr) auto"]) {
|
|
@@ -1777,8 +1759,8 @@
|
|
|
1777
1759
|
@layer sw-components {
|
|
1778
1760
|
:where(v-stack) {
|
|
1779
1761
|
grid-template-columns: minmax(0, 1fr);
|
|
1780
|
-
place-items: center;
|
|
1781
|
-
place-content: center;
|
|
1762
|
+
place-items: safe center;
|
|
1763
|
+
place-content: safe center;
|
|
1782
1764
|
gap: 1rem;
|
|
1783
1765
|
}
|
|
1784
1766
|
}
|
|
@@ -5251,61 +5233,61 @@
|
|
|
5251
5233
|
@layer sw-utils {
|
|
5252
5234
|
h-stack[distribution=leading],
|
|
5253
5235
|
v-flex-stack[distribution=leading] {
|
|
5254
|
-
justify-items: start;
|
|
5255
|
-
justify-content: start;
|
|
5236
|
+
justify-items: start ;
|
|
5237
|
+
justify-content: start ;
|
|
5256
5238
|
}
|
|
5257
5239
|
h-stack[distribution="leading fill"],
|
|
5258
5240
|
v-flex-stack[distribution="leading fill"] {
|
|
5259
|
-
justify-items: start;
|
|
5260
|
-
justify-content: stretch;
|
|
5241
|
+
justify-items: start ;
|
|
5242
|
+
justify-content: stretch ;
|
|
5261
5243
|
}
|
|
5262
5244
|
h-stack[distribution=center],
|
|
5263
5245
|
v-flex-stack[distribution=center] {
|
|
5264
|
-
justify-items: center;
|
|
5265
|
-
justify-content: center;
|
|
5246
|
+
justify-items: safe center ;
|
|
5247
|
+
justify-content: safe center ;
|
|
5266
5248
|
}
|
|
5267
5249
|
h-stack[distribution=trailing],
|
|
5268
5250
|
v-flex-stack[distribution=trailing] {
|
|
5269
|
-
justify-items: end;
|
|
5270
|
-
justify-content: end;
|
|
5251
|
+
justify-items: end ;
|
|
5252
|
+
justify-content: end ;
|
|
5271
5253
|
}
|
|
5272
5254
|
h-stack[distribution=fill],
|
|
5273
5255
|
v-flex-stack[distribution=fill] {
|
|
5274
|
-
justify-items: stretch;
|
|
5275
|
-
justify-content: stretch;
|
|
5256
|
+
justify-items: stretch ;
|
|
5257
|
+
justify-content: stretch ;
|
|
5276
5258
|
}
|
|
5277
5259
|
h-stack[distribution=space-between],
|
|
5278
5260
|
v-flex-stack[distribution=space-between] {
|
|
5279
|
-
justify-content: space-between;
|
|
5261
|
+
justify-content: space-between ;
|
|
5280
5262
|
}
|
|
5281
5263
|
h-stack[alignment=leading],
|
|
5282
5264
|
v-flex-stack[alignment=leading] {
|
|
5283
|
-
align-items: start;
|
|
5284
|
-
align-content: start;
|
|
5265
|
+
align-items: start ;
|
|
5266
|
+
align-content: start ;
|
|
5285
5267
|
}
|
|
5286
5268
|
h-stack[alignment="leading fill"],
|
|
5287
5269
|
v-flex-stack[alignment="leading fill"] {
|
|
5288
|
-
align-items: start;
|
|
5289
|
-
align-content: stretch;
|
|
5270
|
+
align-items: start ;
|
|
5271
|
+
align-content: stretch ;
|
|
5290
5272
|
}
|
|
5291
5273
|
h-stack[alignment=center],
|
|
5292
5274
|
v-flex-stack[alignment=center] {
|
|
5293
|
-
align-items: center;
|
|
5294
|
-
align-content: center;
|
|
5275
|
+
align-items: center ;
|
|
5276
|
+
align-content: center ;
|
|
5295
5277
|
}
|
|
5296
5278
|
h-stack[alignment=trailing],
|
|
5297
5279
|
v-flex-stack[alignment=trailing] {
|
|
5298
|
-
align-items: end;
|
|
5299
|
-
align-content: end;
|
|
5280
|
+
align-items: end ;
|
|
5281
|
+
align-content: end ;
|
|
5300
5282
|
}
|
|
5301
5283
|
h-stack[alignment=fill],
|
|
5302
5284
|
v-flex-stack[alignment=fill] {
|
|
5303
|
-
align-items: stretch;
|
|
5304
|
-
align-content: stretch;
|
|
5285
|
+
align-items: stretch ;
|
|
5286
|
+
align-content: stretch ;
|
|
5305
5287
|
}
|
|
5306
5288
|
h-stack[alignment=space-between],
|
|
5307
5289
|
v-flex-stack[alignment=space-between] {
|
|
5308
|
-
align-content: space-between;
|
|
5290
|
+
align-content: space-between ;
|
|
5309
5291
|
}
|
|
5310
5292
|
h-stack[placement="fill leading"],
|
|
5311
5293
|
v-flex-stack[placement="fill leading"] {
|
|
@@ -5320,61 +5302,61 @@
|
|
|
5320
5302
|
}
|
|
5321
5303
|
v-stack[distribution=leading],
|
|
5322
5304
|
h-flex-stack[distribution=leading] {
|
|
5323
|
-
align-items: start;
|
|
5324
|
-
align-content: start;
|
|
5305
|
+
align-items: start ;
|
|
5306
|
+
align-content: start ;
|
|
5325
5307
|
}
|
|
5326
5308
|
v-stack[distribution="leading fill"],
|
|
5327
5309
|
h-flex-stack[distribution="leading fill"] {
|
|
5328
|
-
align-items: start;
|
|
5329
|
-
align-content: stretch;
|
|
5310
|
+
align-items: start ;
|
|
5311
|
+
align-content: stretch ;
|
|
5330
5312
|
}
|
|
5331
5313
|
v-stack[distribution=center],
|
|
5332
5314
|
h-flex-stack[distribution=center] {
|
|
5333
|
-
align-items: center;
|
|
5334
|
-
align-content: center;
|
|
5315
|
+
align-items: center ;
|
|
5316
|
+
align-content: center ;
|
|
5335
5317
|
}
|
|
5336
5318
|
v-stack[distribution=trailing],
|
|
5337
5319
|
h-flex-stack[distribution=trailing] {
|
|
5338
|
-
align-items: end;
|
|
5339
|
-
align-content: end;
|
|
5320
|
+
align-items: end ;
|
|
5321
|
+
align-content: end ;
|
|
5340
5322
|
}
|
|
5341
5323
|
v-stack[distribution=fill],
|
|
5342
5324
|
h-flex-stack[distribution=fill] {
|
|
5343
|
-
align-items: stretch;
|
|
5344
|
-
align-content: stretch;
|
|
5325
|
+
align-items: stretch ;
|
|
5326
|
+
align-content: stretch ;
|
|
5345
5327
|
}
|
|
5346
5328
|
v-stack[distribution=space-between],
|
|
5347
5329
|
h-flex-stack[distribution=space-between] {
|
|
5348
|
-
align-content: space-between;
|
|
5330
|
+
align-content: space-between ;
|
|
5349
5331
|
}
|
|
5350
5332
|
v-stack[alignment=leading],
|
|
5351
5333
|
h-flex-stack[alignment=leading] {
|
|
5352
|
-
justify-items: start;
|
|
5353
|
-
justify-content: start;
|
|
5334
|
+
justify-items: start ;
|
|
5335
|
+
justify-content: start ;
|
|
5354
5336
|
}
|
|
5355
5337
|
v-stack[alignment="leading fill"],
|
|
5356
5338
|
h-flex-stack[alignment="leading fill"] {
|
|
5357
|
-
justify-items: start;
|
|
5358
|
-
justify-content: stretch;
|
|
5339
|
+
justify-items: start ;
|
|
5340
|
+
justify-content: stretch ;
|
|
5359
5341
|
}
|
|
5360
5342
|
v-stack[alignment=center],
|
|
5361
5343
|
h-flex-stack[alignment=center] {
|
|
5362
|
-
justify-items: center;
|
|
5363
|
-
justify-content: center;
|
|
5344
|
+
justify-items: safe center ;
|
|
5345
|
+
justify-content: safe center ;
|
|
5364
5346
|
}
|
|
5365
5347
|
v-stack[alignment=trailing],
|
|
5366
5348
|
h-flex-stack[alignment=trailing] {
|
|
5367
|
-
justify-items: end;
|
|
5368
|
-
justify-content: end;
|
|
5349
|
+
justify-items: end ;
|
|
5350
|
+
justify-content: end ;
|
|
5369
5351
|
}
|
|
5370
5352
|
v-stack[alignment=fill],
|
|
5371
5353
|
h-flex-stack[alignment=fill] {
|
|
5372
|
-
justify-items: stretch;
|
|
5373
|
-
justify-content: stretch;
|
|
5354
|
+
justify-items: stretch ;
|
|
5355
|
+
justify-content: stretch ;
|
|
5374
5356
|
}
|
|
5375
5357
|
v-stack[alignment=space-between],
|
|
5376
5358
|
h-flex-stack[alignment=space-between] {
|
|
5377
|
-
justify-content: space-between;
|
|
5359
|
+
justify-content: space-between ;
|
|
5378
5360
|
}
|
|
5379
5361
|
v-stack[placement="leading fill"],
|
|
5380
5362
|
h-flex-stack[placement="leading fill"] {
|
|
@@ -5545,23 +5527,33 @@
|
|
|
5545
5527
|
}
|
|
5546
5528
|
:where(v-stack[padding],
|
|
5547
5529
|
h-stack[padding],
|
|
5530
|
+
h-flex-stack[padding],
|
|
5548
5531
|
v-flex-stack[padding]) {
|
|
5549
5532
|
padding-inline: 1rem;
|
|
5550
5533
|
}
|
|
5551
5534
|
:where(scroll-view > v-stack[padding],
|
|
5552
5535
|
scroll-view > h-stack[padding],
|
|
5536
|
+
scroll-view > h-flex-stack[padding],
|
|
5553
5537
|
scroll-view > v-flex-stack[padding]) {
|
|
5554
5538
|
padding-block-end: 1rem;
|
|
5555
5539
|
}
|
|
5556
5540
|
:where(v-stack > [padding]:not(v-stack,
|
|
5557
5541
|
h-stack,
|
|
5542
|
+
h-flex-stack,
|
|
5558
5543
|
v-flex-stack), v-stack > [is=disclosure-group] > summary[padding],
|
|
5559
5544
|
h-stack > [padding]:not(v-stack,
|
|
5560
5545
|
h-stack,
|
|
5546
|
+
h-flex-stack,
|
|
5561
5547
|
v-flex-stack),
|
|
5562
5548
|
h-stack > [is=disclosure-group] > summary[padding],
|
|
5549
|
+
h-flex-stack > [padding]:not(v-stack,
|
|
5550
|
+
h-stack,
|
|
5551
|
+
h-flex-stack,
|
|
5552
|
+
v-flex-stack),
|
|
5553
|
+
h-flex-stack > [is=disclosure-group] > summary[padding],
|
|
5563
5554
|
v-flex-stack > [padding]:not(v-stack,
|
|
5564
5555
|
h-stack,
|
|
5556
|
+
h-flex-stack,
|
|
5565
5557
|
v-flex-stack),
|
|
5566
5558
|
v-flex-stack > [is=disclosure-group] > summary[padding]) {
|
|
5567
5559
|
margin-inline: 1rem;
|
|
@@ -7466,4 +7458,18 @@
|
|
|
7466
7458
|
transition-duration: 100ms;
|
|
7467
7459
|
}
|
|
7468
7460
|
}
|
|
7461
|
+
@media (pointer: coarse) {
|
|
7462
|
+
:where(tab-view > [is=sidebar-view][touch-glass]) {
|
|
7463
|
+
--sidebar-view-scale: scale(1.02);
|
|
7464
|
+
transition-duration: 100ms;
|
|
7465
|
+
}
|
|
7466
|
+
:where(tab-view > sidebar-toggle > *[touch-glass]) {
|
|
7467
|
+
--toolbar-cell-scale: scale(1.07);
|
|
7468
|
+
transition-duration: 100ms;
|
|
7469
|
+
}
|
|
7470
|
+
:where(tab-view > [is=sidebar-view] > tool-bar > sidebar-toggle > *[touch-glass]) {
|
|
7471
|
+
--toolbar-cell-scale: scale(1.07);
|
|
7472
|
+
transition-duration: 100ms;
|
|
7473
|
+
}
|
|
7474
|
+
}
|
|
7469
7475
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
const touchList = new WeakMap();
|
|
2
|
-
function onDown(
|
|
3
|
-
const el =
|
|
2
|
+
function onDown({ target }) {
|
|
3
|
+
const el = target?.closest('button,summary');
|
|
4
4
|
if (!el)
|
|
5
5
|
return;
|
|
6
6
|
touchList.set(el, setTimeout(() => {
|
|
@@ -11,18 +11,18 @@ function onDown(evt) {
|
|
|
11
11
|
el.addEventListener('pointerleave', onLeave, { once: true, passive: true });
|
|
12
12
|
el.closest('scroll-view')?.addEventListener('scroll', onScroll, { once: true, passive: true });
|
|
13
13
|
}
|
|
14
|
-
function onOver(
|
|
15
|
-
const el =
|
|
14
|
+
function onOver({ target, buttons }) {
|
|
15
|
+
const el = target?.closest('button,summary');
|
|
16
16
|
if (!el)
|
|
17
17
|
return;
|
|
18
|
-
if (0 ===
|
|
18
|
+
if (0 === buttons)
|
|
19
19
|
return;
|
|
20
20
|
el.classList.add('active');
|
|
21
21
|
el.removeEventListener('pointerover', onOver);
|
|
22
22
|
el.addEventListener('pointerleave', onLeave, { once: true, passive: true });
|
|
23
23
|
}
|
|
24
|
-
function onLeave(
|
|
25
|
-
const el =
|
|
24
|
+
function onLeave({ target }) {
|
|
25
|
+
const el = target?.closest('button,summary');
|
|
26
26
|
if (!el)
|
|
27
27
|
return;
|
|
28
28
|
el.addEventListener('pointerover', onOver, { once: true, passive: true });
|
|
@@ -35,8 +35,8 @@ function onLeave(evt) {
|
|
|
35
35
|
touchList.delete(el);
|
|
36
36
|
// })
|
|
37
37
|
}
|
|
38
|
-
function onCancel(
|
|
39
|
-
const el =
|
|
38
|
+
function onCancel({ target }) {
|
|
39
|
+
const el = target?.closest('button,summary');
|
|
40
40
|
if (!el)
|
|
41
41
|
return;
|
|
42
42
|
// self.requestAnimationFrame(() => {
|
|
@@ -49,8 +49,8 @@ function onCancel(evt) {
|
|
|
49
49
|
touchList.delete(el);
|
|
50
50
|
// })
|
|
51
51
|
}
|
|
52
|
-
function onScroll(
|
|
53
|
-
for (const el of
|
|
52
|
+
function onScroll({ target }) {
|
|
53
|
+
for (const el of target?.querySelectorAll('button,summary') ?? []) {
|
|
54
54
|
el.classList.remove('active');
|
|
55
55
|
if (touchList.has(el))
|
|
56
56
|
clearTimeout(touchList.get(el));
|
package/package.json
CHANGED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
@forward 'components/index';
|
|
2
|
+
|
|
3
|
+
@forward 'components/v-keyboard';
|
|
4
|
+
|
|
5
|
+
@forward 'components/disclosure-group';
|
|
6
|
+
|
|
7
|
+
@forward 'components/h-divider';
|
|
8
|
+
@forward 'components/v-divider';
|
|
9
|
+
|
|
10
|
+
@forward 'components/full-screen';
|
|
11
|
+
|
|
12
|
+
@forward 'components/detail-placeholder';
|
|
13
|
+
|
|
14
|
+
@forward 'components/sticky-container';
|
|
15
|
+
|
|
16
|
+
@forward 'components/sheet-view';
|
|
17
|
+
|
|
18
|
+
@forward 'components/confirmation-dialog';
|
|
19
|
+
|
|
20
|
+
@forward 'components/scroll-view';
|
|
21
|
+
@forward 'components/scroll-view-proxy';
|
|
22
|
+
|
|
23
|
+
@forward 'components/h-stack';
|
|
24
|
+
@forward 'components/v-stack';
|
|
25
|
+
@forward 'components/h-flex-stack';
|
|
26
|
+
@forward 'components/v-flex-stack';
|
|
27
|
+
|
|
28
|
+
@forward 'components/scroll-view-toolbars';
|
|
29
|
+
|
|
30
|
+
@forward 'components/tool-bar-item';
|
|
31
|
+
|
|
32
|
+
@forward 'components/tool-bar-item-group';
|
|
33
|
+
|
|
34
|
+
@forward 'components/plain-button';
|
|
35
|
+
@forward 'components/borderless-button';
|
|
36
|
+
@forward 'components/bordered-button';
|
|
37
|
+
@forward 'components/bordered-prominent-button';
|
|
38
|
+
@forward 'components/glass-button';
|
|
39
|
+
@forward 'components/glass-prominent-button';
|
|
40
|
+
|
|
41
|
+
@forward 'components/tool-bar';
|
|
42
|
+
|
|
43
|
+
@forward 'components/label-view';
|
|
44
|
+
|
|
45
|
+
@forward 'components/labeled-content';
|
|
46
|
+
|
|
47
|
+
// @forward 'components/button-view';
|
|
48
|
+
|
|
49
|
+
@forward 'components/body-view';
|
|
50
|
+
|
|
51
|
+
@forward 'components/navigation-large-title';
|
|
52
|
+
@forward 'components/navigation-title';
|
|
53
|
+
|
|
54
|
+
@forward 'components/sidebar-toggle';
|
|
55
|
+
|
|
56
|
+
@forward 'components/menu-view';
|
|
57
|
+
|
|
58
|
+
@forward 'components/sidebar-view';
|
|
59
|
+
|
|
60
|
+
@forward 'components/list-view';
|
|
61
|
+
@forward 'components/form-view';
|
|
62
|
+
@forward 'components/section-view';
|
|
63
|
+
@forward 'components/table-view';
|
|
64
|
+
@forward 'components/table-row';
|
|
65
|
+
@forward 'components/table-column';
|
|
66
|
+
|
|
67
|
+
@forward 'components/text-field';
|
|
68
|
+
@forward 'components/date-picker';
|
|
69
|
+
@forward 'components/picker-view';
|
|
70
|
+
|
|
71
|
+
@forward 'components/navigation-stack';
|
|
72
|
+
@forward 'components/navigation-split-view';
|
|
73
|
+
|
|
74
|
+
@forward 'components/tab-view';
|
|
75
|
+
@forward 'components/tab-bar';
|
|
76
|
+
@forward 'components/tab-item';
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
@use '../vars';
|
|
2
|
+
|
|
3
|
+
@layer #{vars.$components-layer} {
|
|
4
|
+
h-flex-stack {
|
|
5
|
+
:where(&) {
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-flow: row nowrap;
|
|
8
|
+
|
|
9
|
+
place-items: safe center;
|
|
10
|
+
place-content: safe center;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
:where(& > *) {
|
|
14
|
+
max-block-size: 100%;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
> [frame-height='infinity'] {
|
|
18
|
+
:where(&) {
|
|
19
|
+
flex-grow: 1;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -10,8 +10,8 @@ $h-stack-templates: ((minmax(0, 1fr) auto), (auto minmax(0, 1fr) auto auto), (re
|
|
|
10
10
|
grid-auto-flow: column;
|
|
11
11
|
grid-template-rows: minmax(0, 1fr);
|
|
12
12
|
|
|
13
|
-
place-items: center;
|
|
14
|
-
place-content: center;
|
|
13
|
+
place-items: safe center;
|
|
14
|
+
place-content: safe center;
|
|
15
15
|
|
|
16
16
|
gap: 1rem;
|
|
17
17
|
}
|
|
@@ -33,18 +33,18 @@
|
|
|
33
33
|
scroll-snap-align: start;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
:where(&) {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
36
|
+
// :where(&) {
|
|
37
|
+
// &::before {
|
|
38
|
+
// @include mixins.span-all;
|
|
39
|
+
// content: '';
|
|
40
|
+
// display: inline-grid;
|
|
41
|
+
// block-size: 1px;
|
|
42
|
+
// inline-size: 1px;
|
|
43
|
+
// z-index: -1;
|
|
44
|
+
// pointer-events: none;
|
|
45
|
+
// position: absolute;
|
|
46
|
+
// }
|
|
47
|
+
// }
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
> v-stack {
|
|
@@ -53,9 +53,9 @@
|
|
|
53
53
|
|
|
54
54
|
scroll-snap-type: block mandatory;
|
|
55
55
|
|
|
56
|
-
&::before {
|
|
57
|
-
|
|
58
|
-
}
|
|
56
|
+
// &::before {
|
|
57
|
+
// block-size: calc(100cqb + 1px); // creates overflow
|
|
58
|
+
// }
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
|
|
@@ -65,9 +65,9 @@
|
|
|
65
65
|
|
|
66
66
|
scroll-snap-type: inline mandatory;
|
|
67
67
|
|
|
68
|
-
&::before {
|
|
69
|
-
|
|
70
|
-
}
|
|
68
|
+
// &::before {
|
|
69
|
+
// inline-size: calc(100cqi + 1px); // creates overflow
|
|
70
|
+
// }
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
:where(&[padding]) {
|
|
@@ -63,5 +63,22 @@
|
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
|
+
|
|
67
|
+
tab-view {
|
|
68
|
+
:where(& > [is='sidebar-view'][touch-glass]) {
|
|
69
|
+
--sidebar-view-scale: scale(1.02);
|
|
70
|
+
transition-duration: 100ms;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
:where(& > sidebar-toggle > *[touch-glass]) {
|
|
74
|
+
--toolbar-cell-scale: scale(1.07);
|
|
75
|
+
transition-duration: 100ms;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
:where(& > [is='sidebar-view'] > tool-bar > sidebar-toggle > *[touch-glass]) {
|
|
79
|
+
--toolbar-cell-scale: scale(1.07);
|
|
80
|
+
transition-duration: 100ms;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
66
83
|
}
|
|
67
84
|
}
|
package/scss/utils/_stacks.scss
CHANGED
|
@@ -3,97 +3,97 @@
|
|
|
3
3
|
@use 'sass:map';
|
|
4
4
|
@use 'sass:list';
|
|
5
5
|
|
|
6
|
-
$h-map: (
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
);
|
|
12
|
-
|
|
13
|
-
$v-map: (
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
);
|
|
19
|
-
|
|
20
|
-
$placement-map: (
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
);
|
|
31
|
-
|
|
32
|
-
$alignment-map: (
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
);
|
|
38
|
-
|
|
39
|
-
$distribution-map: (
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
);
|
|
6
|
+
// $h-map: (
|
|
7
|
+
// leading: start,
|
|
8
|
+
// center: center,
|
|
9
|
+
// trailing: end,
|
|
10
|
+
// fill: stretch, // cross-axis stretch
|
|
11
|
+
// );
|
|
12
|
+
|
|
13
|
+
// $v-map: (
|
|
14
|
+
// top: start,
|
|
15
|
+
// center: center,
|
|
16
|
+
// bottom: end,
|
|
17
|
+
// fill: stretch, // cross-axis stretch
|
|
18
|
+
// );
|
|
19
|
+
|
|
20
|
+
// $placement-map: (
|
|
21
|
+
// top-leading: start start,
|
|
22
|
+
// top: start center,
|
|
23
|
+
// top-trailing: start end,
|
|
24
|
+
// center-leading: center start,
|
|
25
|
+
// center: center center,
|
|
26
|
+
// center-trailing: center end,
|
|
27
|
+
// bottom-leading: end start,
|
|
28
|
+
// bottom: end center,
|
|
29
|
+
// bottom-trailing: end end,
|
|
30
|
+
// );
|
|
31
|
+
|
|
32
|
+
// $alignment-map: (
|
|
33
|
+
// leading: start,
|
|
34
|
+
// center: center,
|
|
35
|
+
// trailing: end,
|
|
36
|
+
// fill: stretch, // cross-axis stretch
|
|
37
|
+
// );
|
|
38
|
+
|
|
39
|
+
// $distribution-map: (
|
|
40
|
+
// top: start,
|
|
41
|
+
// center: center,
|
|
42
|
+
// bottom: end,
|
|
43
|
+
// fill: stretch,
|
|
44
|
+
// between: space-between,
|
|
45
|
+
// evenly: space-evenly,
|
|
46
|
+
// );
|
|
47
47
|
|
|
48
48
|
$inline-map: (
|
|
49
49
|
leading: (
|
|
50
|
-
(justify-items start),
|
|
51
|
-
(justify-content start),
|
|
50
|
+
(justify-items (start)),
|
|
51
|
+
(justify-content (start)),
|
|
52
52
|
),
|
|
53
53
|
'leading fill': (
|
|
54
|
-
(justify-items start),
|
|
55
|
-
(justify-content stretch),
|
|
54
|
+
(justify-items (start)),
|
|
55
|
+
(justify-content (stretch)),
|
|
56
56
|
),
|
|
57
57
|
center: (
|
|
58
|
-
(justify-items center),
|
|
59
|
-
(justify-content center),
|
|
58
|
+
(justify-items (safe center)),
|
|
59
|
+
(justify-content (safe center)),
|
|
60
60
|
),
|
|
61
61
|
trailing: (
|
|
62
|
-
(justify-items end),
|
|
63
|
-
(justify-content end),
|
|
62
|
+
(justify-items (end)),
|
|
63
|
+
(justify-content (end)),
|
|
64
64
|
),
|
|
65
65
|
fill: (
|
|
66
|
-
(justify-items stretch),
|
|
67
|
-
(justify-content stretch),
|
|
66
|
+
(justify-items (stretch)),
|
|
67
|
+
(justify-content (stretch)),
|
|
68
68
|
),
|
|
69
69
|
space-between: (
|
|
70
|
-
(justify-content space-between),
|
|
70
|
+
(justify-content (space-between)),
|
|
71
71
|
),
|
|
72
72
|
);
|
|
73
73
|
|
|
74
74
|
$block-map: (
|
|
75
75
|
leading: (
|
|
76
|
-
(align-items start),
|
|
77
|
-
(align-content start),
|
|
76
|
+
(align-items (start)),
|
|
77
|
+
(align-content (start)),
|
|
78
78
|
),
|
|
79
79
|
'leading fill': (
|
|
80
|
-
(align-items start),
|
|
81
|
-
(align-content stretch),
|
|
80
|
+
(align-items (start)),
|
|
81
|
+
(align-content (stretch)),
|
|
82
82
|
),
|
|
83
83
|
center: (
|
|
84
|
-
(align-items center),
|
|
85
|
-
(align-content center),
|
|
84
|
+
(align-items (center)),
|
|
85
|
+
(align-content (center)),
|
|
86
86
|
),
|
|
87
87
|
trailing: (
|
|
88
|
-
(align-items end),
|
|
89
|
-
(align-content end),
|
|
88
|
+
(align-items (end)),
|
|
89
|
+
(align-content (end)),
|
|
90
90
|
),
|
|
91
91
|
fill: (
|
|
92
|
-
(align-items stretch),
|
|
93
|
-
(align-content stretch),
|
|
92
|
+
(align-items (stretch)),
|
|
93
|
+
(align-content (stretch)),
|
|
94
94
|
),
|
|
95
95
|
space-between: (
|
|
96
|
-
(align-content space-between),
|
|
96
|
+
(align-content (space-between)),
|
|
97
97
|
),
|
|
98
98
|
);
|
|
99
99
|
|
|
@@ -129,7 +129,7 @@ $v-placement-map: (
|
|
|
129
129
|
@each $k, $declarations in $inline-map {
|
|
130
130
|
&[distribution='#{$k}'] {
|
|
131
131
|
@each $decl in $declarations {
|
|
132
|
-
#{list.nth($decl, 1)}: #{list.nth($decl, 2)};
|
|
132
|
+
#{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
|
|
133
133
|
}
|
|
134
134
|
}
|
|
135
135
|
}
|
|
@@ -138,7 +138,7 @@ $v-placement-map: (
|
|
|
138
138
|
@each $k, $declarations in $block-map {
|
|
139
139
|
&[alignment='#{$k}'] {
|
|
140
140
|
@each $decl in $declarations {
|
|
141
|
-
#{list.nth($decl, 1)}: #{list.nth($decl, 2)};
|
|
141
|
+
#{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
|
|
142
142
|
}
|
|
143
143
|
}
|
|
144
144
|
}
|
|
@@ -172,7 +172,7 @@ $v-placement-map: (
|
|
|
172
172
|
@each $k, $declarations in $block-map {
|
|
173
173
|
&[distribution='#{$k}'] {
|
|
174
174
|
@each $decl in $declarations {
|
|
175
|
-
#{list.nth($decl, 1)}: #{list.nth($decl, 2)};
|
|
175
|
+
#{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
|
|
176
176
|
}
|
|
177
177
|
}
|
|
178
178
|
}
|
|
@@ -181,7 +181,7 @@ $v-placement-map: (
|
|
|
181
181
|
@each $k, $declarations in $inline-map {
|
|
182
182
|
&[alignment='#{$k}'] {
|
|
183
183
|
@each $decl in $declarations {
|
|
184
|
-
#{list.nth($decl, 1)}: #{list.nth($decl, 2)};
|
|
184
|
+
#{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
|
|
185
185
|
}
|
|
186
186
|
}
|
|
187
187
|
}
|
|
@@ -225,6 +225,7 @@ $v-placement-map: (
|
|
|
225
225
|
// padding reserved word for stacks
|
|
226
226
|
v-stack,
|
|
227
227
|
h-stack,
|
|
228
|
+
h-flex-stack,
|
|
228
229
|
v-flex-stack {
|
|
229
230
|
:where(&[padding]) {
|
|
230
231
|
padding-inline: 1rem;
|