@swiftwc/ui 0.0.0-dev.40 → 0.0.0-dev.42

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.
Files changed (6) hide show
  1. package/generated/components/picker-view.js +26 -10
  2. package/generated/css/index.css +0 -72
  3. package/package.json +1 -1
  4. package/scss/_vars.scss +1 -1
  5. package/scss/base/_root.scss +2 -2
  6. package/scss/components/_picker-view.scss +30 -30
package/generated/components/picker-view.js CHANGED
@@ -20,24 +20,40 @@ const update = (path, node, overwrite = true) => {
20
20
  };
21
21
  const reflectSpawnedElement = (current, source) => {
22
22
  const { page: oldSv, toolBarConfig: oldToolbar } = new NavigationPath(current).hydrate(), { page: newSv, toolBarConfig: newToolbar } = new NavigationPath(source).hydrate();
23
- const oldVStack = oldSv?.querySelector(':scope>v-stack'), newVStack = newSv?.querySelector(':scope>v-stack'), oldBackBtn = oldToolbar?.at(0)?.querySelector('button'), newBackBtn = newToolbar?.at(0)?.querySelector('button');
24
- // pre replace list (always exist)
25
- const oldOpenedDetails = [...(oldVStack?.querySelectorAll('list-view details[open]>summary') ?? [])].map((item) => item.textContent.trim());
26
- // replace list (always exist)
27
- if (oldVStack && newVStack)
28
- oldVStack.replaceWith(newVStack);
29
- // post replace list (always exist)
23
+ const oldList = oldSv?.querySelector('list-view'), newList = newSv?.querySelector('list-view'), oldBackBtn = oldToolbar?.at(0)?.querySelector('button'), newBackBtn = newToolbar?.at(0)?.querySelector('button');
24
+ // pre replace list (always exists)
25
+ const oldOpenedDetails = [...(oldList?.querySelectorAll('list-view details[open]>summary') ?? [])].map((item) => item.textContent.trim());
26
+ // replace list (always exists)
27
+ if (oldList && newList)
28
+ oldList.replaceWith(newList);
29
+ // post replace list (always exists)
30
30
  for (const label of oldOpenedDetails)
31
- for (const summary of newVStack?.querySelectorAll('list-view details>summary') ?? [])
31
+ for (const summary of newList?.querySelectorAll('list-view details>summary') ?? [])
32
32
  if (summary.textContent.trim() === label) {
33
33
  summary.parentElement?.setAttribute('open', 'open');
34
34
  break;
35
35
  }
36
- // replace backbtns (always exist)
36
+ // replace backbtns (always exists)
37
37
  if (oldBackBtn && newBackBtn)
38
38
  oldBackBtn.replaceWith(newBackBtn);
39
- // overwrite navtitle (always exist)
39
+ // overwrite navtitle (always exists)
40
40
  oldSv?.setAttribute('navigation-inline-title', newSv?.getAttribute('navigation-inline-title') ?? '');
41
+ // replace search (if exists)
42
+ oldList?.style.setProperty('--list--sticky-block-size', newList?.style.getPropertyValue('--list--sticky-block-size') ?? '');
43
+ // replace search (if exists)
44
+ const oldSearch = oldSv?.querySelector('sticky-container'), newSearch = newSv?.querySelector('sticky-container');
45
+ // if already exists, DO NOTHING dont mess up the input element
46
+ if (newSearch) {
47
+ if (!oldSearch)
48
+ oldSv?.insertAdjacentHTML('afterend', `<sticky-container edge="navbar" style="order: -1" padding>
49
+ <v-stack spacing="0" alignment="fill">
50
+ <input is="search-view" placeholder="Search">
51
+ <button type="button">Filters</button>
52
+ </v-stack>
53
+ </sticky-container>`);
54
+ }
55
+ else
56
+ oldSearch?.remove();
41
57
  };
42
58
  const extractTagFromOption = (node) => {
43
59
  return ((node.getAttribute('value') ?? node.textContent?.trim()) || node.getAttribute('label')) ?? '';
package/generated/css/index.css CHANGED
@@ -264,8 +264,6 @@
264
264
  --large-btn-padding: 1.2rem;
265
265
  --large-btn-border-radius: 2.4rem;
266
266
  --large-btn-border-radius: 2.4rem;
267
- --picker-affordance-size: 1rem;
268
- --picker-affordance-col-gap: 1rem;
269
267
  }
270
268
  @media (pointer: fine) {
271
269
  :root {
@@ -4325,42 +4323,6 @@
4325
4323
  margin-inline-start: 2rem;
4326
4324
  }
4327
4325
  }
4328
- @container style(--picker-style: menu) {
4329
- :where(picker-view menu-view > button, picker-view menu-view > [is=disclosure-group] > button, picker-view menu-view > [is=disclosure-group] > summary) {
4330
- position: relative;
4331
- grid-auto-flow: column;
4332
- grid-template-columns: var(--picker-affordance-size) minmax(0, 1fr);
4333
- column-gap: var(--picker-affordance-col-gap);
4334
- }
4335
- :where(picker-view menu-view > button, picker-view menu-view > [is=disclosure-group] > button, picker-view menu-view > [is=disclosure-group] > summary)::before {
4336
- pointer-events: none;
4337
- content: "";
4338
- -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E') no-repeat center/contain;
4339
- mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E') no-repeat center/contain;
4340
- transform-origin: center;
4341
- aspect-ratio: 1;
4342
- place-self: center;
4343
- }
4344
- :where(picker-view menu-view > button, picker-view menu-view > [is=disclosure-group] > button, picker-view menu-view > [is=disclosure-group] > summary)::before {
4345
- display: grid;
4346
- block-size: var(--picker-affordance-size);
4347
- inline-size: var(--picker-affordance-size);
4348
- background-color: var(--menuitemtext, var(--text));
4349
- transform: var(--tablecol--after-rotate, );
4350
- }
4351
- @media (prefers-reduced-motion: no-preference) {
4352
- :where(picker-view menu-view > button, picker-view menu-view > [is=disclosure-group] > button, picker-view menu-view > [is=disclosure-group] > summary)::before {
4353
- transition: transform 100ms ease-out;
4354
- will-change: transform;
4355
- }
4356
- }
4357
- :where(picker-view menu-view > button, picker-view menu-view > [is=disclosure-group] > button, picker-view menu-view > [is=disclosure-group] > summary)::before {
4358
- opacity: 0;
4359
- }
4360
- :where(picker-view menu-view > button, picker-view menu-view > [is=disclosure-group] > button, picker-view menu-view > [is=disclosure-group] > summary)[aria-selected=true]::before {
4361
- opacity: 1;
4362
- }
4363
- }
4364
4326
  @supports (x: if(else:red)) {
4365
4327
  :where(picker-view) {
4366
4328
  --picker--labelstack-display: if(style(--picker-style: menu): grid; );
@@ -4377,40 +4339,6 @@
4377
4339
  :where(:where(picker-view[picker-style=menu]) menu-view > menu-view > label-view[slot=label]) {
4378
4340
  margin-inline-start: 2rem;
4379
4341
  }
4380
- :where(:where(picker-view[picker-style=menu]) menu-view > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > summary) {
4381
- position: relative;
4382
- grid-auto-flow: column;
4383
- grid-template-columns: var(--picker-affordance-size) minmax(0, 1fr);
4384
- column-gap: var(--picker-affordance-col-gap);
4385
- }
4386
- :where(:where(picker-view[picker-style=menu]) menu-view > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > summary)::before {
4387
- pointer-events: none;
4388
- content: "";
4389
- -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E') no-repeat center/contain;
4390
- mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E') no-repeat center/contain;
4391
- transform-origin: center;
4392
- aspect-ratio: 1;
4393
- place-self: center;
4394
- }
4395
- :where(:where(picker-view[picker-style=menu]) menu-view > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > summary)::before {
4396
- display: grid;
4397
- block-size: var(--picker-affordance-size);
4398
- inline-size: var(--picker-affordance-size);
4399
- background-color: var(--menuitemtext, var(--text));
4400
- transform: var(--tablecol--after-rotate, );
4401
- }
4402
- @media (prefers-reduced-motion: no-preference) {
4403
- :where(:where(picker-view[picker-style=menu]) menu-view > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > summary)::before {
4404
- transition: transform 100ms ease-out;
4405
- will-change: transform;
4406
- }
4407
- }
4408
- :where(:where(picker-view[picker-style=menu]) menu-view > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > summary)::before {
4409
- opacity: 0;
4410
- }
4411
- :where(:where(picker-view[picker-style=menu]) menu-view > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > summary)[aria-selected=true]::before {
4412
- opacity: 1;
4413
- }
4414
4342
  :where(picker-view[picker-style=menu]) {
4415
4343
  --picker--labelstack-display: grid;
4416
4344
  --picker--stack-grid-template-columns: auto minmax(0, 1fr);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@swiftwc/ui",
3
- "version": "0.0.0-dev.40",
3
+ "version": "0.0.0-dev.42",
4
4
  "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/scss/_vars.scss CHANGED
@@ -145,7 +145,7 @@ $button-sizes: (
145
145
 
146
146
  $disclosure-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"%3E%3C/path%3E%3C/svg%3E'; // ph-caret-right-bold
147
147
  $table-col-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M216.49,168.49a12,12,0,0,1-17,0L128,97,56.49,168.49a12,12,0,0,1-17-17l80-80a12,12,0,0,1,17,0l80,80A12,12,0,0,1,216.49,168.49Z"%3E%3C/path%3E%3C/svg%3E'; // ph-caret-up-bold
148
- $picker-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E'; // ph-check-bold
148
+ // $picker-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E'; // ph-check-bold
149
149
 
150
150
  $cancel-button-icon: 'x'; // ph-trash
151
151
  $close-button-icon: 'x'; // ph-trash
package/scss/base/_root.scss CHANGED
@@ -338,8 +338,8 @@
338
338
  }
339
339
  }
340
340
 
341
- --picker-affordance-size: 1rem;
342
- --picker-affordance-col-gap: 1rem;
341
+ // --picker-affordance-size: 1rem;
342
+ // --picker-affordance-col-gap: 1rem;
343
343
 
344
344
  // SECTION
345
345
 
package/scss/components/_picker-view.scss CHANGED
@@ -14,37 +14,37 @@ $picker-elses: (
14
14
  --picker--stack-grid-template-columns: minmax(0, 1fr), //auto minmax(0, 1fr),
15
15
  );
16
16
 
17
- @mixin make-button-affordance() {
18
- position: relative;
17
+ // @mixin make-button-affordance() {
18
+ // position: relative;
19
19
 
20
- grid-auto-flow: column;
21
- grid-template-columns: var(--picker-affordance-size) minmax(0, 1fr);
22
- column-gap: var(--picker-affordance-col-gap);
20
+ // grid-auto-flow: column;
21
+ // grid-template-columns: var(--picker-affordance-size) minmax(0, 1fr);
22
+ // column-gap: var(--picker-affordance-col-gap);
23
23
 
24
- @include mixins.make-marker-pseudos(vars.$picker-affordance, before);
24
+ // @include mixins.make-marker-pseudos(vars.$picker-affordance, before);
25
25
 
26
- &::before {
27
- display: grid;
26
+ // &::before {
27
+ // display: grid;
28
28
 
29
- block-size: var(--picker-affordance-size);
30
- inline-size: var(--picker-affordance-size);
29
+ // block-size: var(--picker-affordance-size);
30
+ // inline-size: var(--picker-affordance-size);
31
31
 
32
- background-color: var(--menuitemtext, var(--text));
32
+ // background-color: var(--menuitemtext, var(--text));
33
33
 
34
- transform: var(--tablecol--after-rotate,);
34
+ // transform: var(--tablecol--after-rotate,);
35
35
 
36
- @media (prefers-reduced-motion: no-preference) {
37
- transition: transform 100ms ease-out;
38
- will-change: transform;
39
- }
36
+ // @media (prefers-reduced-motion: no-preference) {
37
+ // transition: transform 100ms ease-out;
38
+ // will-change: transform;
39
+ // }
40
40
 
41
- opacity: 0;
42
- }
41
+ // opacity: 0;
42
+ // }
43
43
 
44
- &[aria-selected='true']::before {
45
- opacity: 1;
46
- }
47
- }
44
+ // &[aria-selected='true']::before {
45
+ // opacity: 1;
46
+ // }
47
+ // }
48
48
 
49
49
  @layer #{vars.$components-layer} {
50
50
  picker-view {
@@ -84,11 +84,11 @@ $picker-elses: (
84
84
  margin-inline-start: 2rem;
85
85
  }
86
86
  }
87
- :where(& menu-view > button, & menu-view > [is='disclosure-group'] > button, & menu-view > [is='disclosure-group'] > summary) {
88
- @container style(--picker-style: menu) {
89
- @include make-button-affordance;
90
- }
91
- }
87
+ // :where(& menu-view > button, & menu-view > [is='disclosure-group'] > button, & menu-view > [is='disclosure-group'] > summary) {
88
+ // @container style(--picker-style: menu) {
89
+ // @include make-button-affordance;
90
+ // }
91
+ // }
92
92
 
93
93
  // SECTION: ifs
94
94
  @supports (x: #{string.unquote('if(else:red)')}) {
@@ -112,9 +112,9 @@ $picker-elses: (
112
112
  margin-inline-start: 2rem;
113
113
  }
114
114
 
115
- :where(& menu-view > button, & menu-view > [is='disclosure-group'] > button, & menu-view > [is='disclosure-group'] > summary) {
116
- @include make-button-affordance;
117
- }
115
+ // :where(& menu-view > button, & menu-view > [is='disclosure-group'] > button, & menu-view > [is='disclosure-group'] > summary) {
116
+ // @include make-button-affordance;
117
+ // }
118
118
 
119
119
  @include mixins.write-props(map.get($picker-ifs, $v)); //@include set-picker-style($v);
120
120
  }