@swiftwc/ui 0.0.0-dev.30 → 0.0.0-dev.32
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/v-keyboard.d.ts +3 -1
- package/generated/components/v-keyboard.js +3 -1
- package/generated/css/index.css +5 -5
- package/generated/internal/utils/button-role.js +42 -44
- package/package.json +1 -1
- package/scss/base/_reboot.scss +3 -3
- package/scss/base/_root.scss +1 -1
- package/web-components.html-data/en.json +35 -4
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
* BUG: Safari on IOS reports inaccurate innerHeight (which is what we really want) on orientationchange.
|
|
3
3
|
* So we live with a pescy body-scrollbar that shows up on resize on desktops.
|
|
4
4
|
*
|
|
5
|
-
* @summary Required component,
|
|
5
|
+
* @summary Required component, used to handle the virtual keyboard on touch devices.
|
|
6
|
+
*
|
|
7
|
+
* @attr {Inter} system-font - Prefers the "Inter" font family, if loaded.
|
|
6
8
|
*/
|
|
7
9
|
export declare class VKeyboard extends HTMLElement {
|
|
8
10
|
#private;
|
|
@@ -6,7 +6,9 @@ import { Snapshot } from '../snapshot';
|
|
|
6
6
|
* BUG: Safari on IOS reports inaccurate innerHeight (which is what we really want) on orientationchange.
|
|
7
7
|
* So we live with a pescy body-scrollbar that shows up on resize on desktops.
|
|
8
8
|
*
|
|
9
|
-
* @summary Required component,
|
|
9
|
+
* @summary Required component, used to handle the virtual keyboard on touch devices.
|
|
10
|
+
*
|
|
11
|
+
* @attr {Inter} system-font - Prefers the "Inter" font family, if loaded.
|
|
10
12
|
*/
|
|
11
13
|
export class VKeyboard extends HTMLElement {
|
|
12
14
|
/**
|
package/generated/css/index.css
CHANGED
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
--toolbar-cell-block-padding-start: 0.25rem;
|
|
102
102
|
--toolbar-cell-block-padding-end: 0.25rem;
|
|
103
103
|
--toolbar-cell-border-radius: var(--pill-border-radius);
|
|
104
|
-
--toolbar-cell-min-size: 2.
|
|
104
|
+
--toolbar-cell-min-size: 2.96rem;
|
|
105
105
|
--toolbar-cell-focus-bg: var(--control-clear-glass-focus-bg);
|
|
106
106
|
--toolbar-cell-focus-bg-dark: var(--control-clear-glass-focus-bg-dark);
|
|
107
107
|
--toolbar-cell-active-bg: var(--control-clear-glass-active-bg);
|
|
@@ -400,13 +400,13 @@
|
|
|
400
400
|
font-feature-settings: var(--host--font-feature-settings, normal);
|
|
401
401
|
font-variation-settings: var(--host--font-variation-settings, normal);
|
|
402
402
|
}
|
|
403
|
-
html:has(body > v-keyboard[system-font=Inter]) {
|
|
404
|
-
--host--font-family:
|
|
403
|
+
:where(html:has(body > v-keyboard[system-font=Inter])) {
|
|
404
|
+
--host--font-family: Inter, sans-serif;
|
|
405
405
|
--host--font-feature-settings: 'liga' 1, 'calt' 1;
|
|
406
406
|
}
|
|
407
407
|
@supports (font-variation-settings: normal) {
|
|
408
|
-
html:has(body > v-keyboard[system-font=Inter]) {
|
|
409
|
-
--host--font-family:
|
|
408
|
+
:where(html:has(body > v-keyboard[system-font=Inter])) {
|
|
409
|
+
--host--font-family: InterVariable, sans-serif;
|
|
410
410
|
}
|
|
411
411
|
}
|
|
412
412
|
html::before {
|
|
@@ -4,50 +4,48 @@ import { CleanupRegistry } from '../class/cleanup-registry';
|
|
|
4
4
|
import { default as $ } from './cash';
|
|
5
5
|
import onoff from './onoff';
|
|
6
6
|
function renderPlaceholder(el, role, titleKey) {
|
|
7
|
-
if (!el.isConnected)
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
// } else label?.remove()
|
|
50
|
-
});
|
|
7
|
+
// if (!el.isConnected) return
|
|
8
|
+
// self.requestAnimationFrame(() => {
|
|
9
|
+
// if (!el.isConnected) return
|
|
10
|
+
const label = el.querySelector(':scope>[slot=placeholder]') ?? el.appendChild($(`<label-view slot="placeholder"></label-view>`, '>1'));
|
|
11
|
+
switch (role) {
|
|
12
|
+
case 'cancel':
|
|
13
|
+
label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel);
|
|
14
|
+
label.setAttribute('system-image', Snapshot.config['cancel-button-icon']);
|
|
15
|
+
break;
|
|
16
|
+
case 'close':
|
|
17
|
+
if (label.closest('[is=alert-dialog]')) {
|
|
18
|
+
label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').OK);
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Close);
|
|
22
|
+
label.setAttribute('system-image', Snapshot.config['close-button-icon']);
|
|
23
|
+
}
|
|
24
|
+
break;
|
|
25
|
+
case 'confirm':
|
|
26
|
+
label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm);
|
|
27
|
+
label.setAttribute('system-image', Snapshot.config['confirm-button-icon']);
|
|
28
|
+
break;
|
|
29
|
+
case 'confirmation-action':
|
|
30
|
+
label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm);
|
|
31
|
+
label.setAttribute('system-image', Snapshot.config['confirm-button-icon']);
|
|
32
|
+
break;
|
|
33
|
+
case 'cancellation-action':
|
|
34
|
+
label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel);
|
|
35
|
+
label.setAttribute('system-image', Snapshot.config['cancel-button-icon']);
|
|
36
|
+
break;
|
|
37
|
+
case 'destructive':
|
|
38
|
+
label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Destructive);
|
|
39
|
+
label.setAttribute('system-image', Snapshot.config['delete-button-icon']);
|
|
40
|
+
break;
|
|
41
|
+
default:
|
|
42
|
+
label?.remove();
|
|
43
|
+
break;
|
|
44
|
+
}
|
|
45
|
+
// if (role) {
|
|
46
|
+
// label.setAttribute('title', I18n.t('ButtonRole').Default.Destructive)
|
|
47
|
+
// } else label?.remove()
|
|
48
|
+
// })
|
|
51
49
|
}
|
|
52
50
|
export default function (target, role, titleKey) {
|
|
53
51
|
const overiderTitle = typeof titleKey === 'string' && titleKey in I18n.t('ButtonRole') ? titleKey : undefined;
|
package/package.json
CHANGED
package/scss/base/_reboot.scss
CHANGED
|
@@ -122,13 +122,13 @@
|
|
|
122
122
|
|
|
123
123
|
font-variation-settings: var(--host--font-variation-settings, normal);
|
|
124
124
|
|
|
125
|
-
&:has(body > v-keyboard[system-font='Inter']) {
|
|
126
|
-
--host--font-family:
|
|
125
|
+
:where(&:has(body > v-keyboard[system-font='Inter'])) {
|
|
126
|
+
--host--font-family: Inter, sans-serif;
|
|
127
127
|
|
|
128
128
|
--host--font-feature-settings: 'liga' 1, 'calt' 1;
|
|
129
129
|
|
|
130
130
|
@supports (font-variation-settings: normal) {
|
|
131
|
-
--host--font-family:
|
|
131
|
+
--host--font-family: InterVariable, sans-serif;
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
134
|
}
|
package/scss/base/_root.scss
CHANGED
|
@@ -178,7 +178,7 @@
|
|
|
178
178
|
--toolbar-cell-block-padding-start: 0.25rem;
|
|
179
179
|
--toolbar-cell-block-padding-end: 0.25rem;
|
|
180
180
|
--toolbar-cell-border-radius: var(--pill-border-radius);
|
|
181
|
-
--toolbar-cell-min-size: 2.
|
|
181
|
+
--toolbar-cell-min-size: 2.96rem;
|
|
182
182
|
|
|
183
183
|
--toolbar-cell-focus-bg: var(--control-clear-glass-focus-bg); //oklch(0 0 0 / 0%);
|
|
184
184
|
--toolbar-cell-focus-bg-dark: var(--control-clear-glass-focus-bg-dark); //oklch(0 0 0 / 0%);
|
|
@@ -349,18 +349,49 @@
|
|
|
349
349
|
},
|
|
350
350
|
{
|
|
351
351
|
"name": "vkeyboard",
|
|
352
|
-
"description": "Required component,
|
|
352
|
+
"description": "Required component, used to handle the virtual keyboard on touch devices.",
|
|
353
|
+
"attributes": [
|
|
354
|
+
{
|
|
355
|
+
"name": "system-font",
|
|
356
|
+
"description": "Value Type: “Inter”\n\nDescription: Prefers the \"Inter\" font family, if loaded.",
|
|
357
|
+
"values": [
|
|
358
|
+
{
|
|
359
|
+
"name": "Inter"
|
|
360
|
+
}
|
|
361
|
+
]
|
|
362
|
+
}
|
|
363
|
+
]
|
|
353
364
|
},
|
|
354
365
|
{
|
|
355
366
|
"name": "vstack",
|
|
356
367
|
"description": "",
|
|
357
368
|
"attributes": [
|
|
358
369
|
{
|
|
359
|
-
"name": "
|
|
360
|
-
"description": "\nDescription:
|
|
370
|
+
"name": "distribution",
|
|
371
|
+
"description": "Value Type: “leading” | “leading fill” | “center” | “trailing” | “fill” | “space-between”\n\nDescription: The distribution of cols",
|
|
372
|
+
"values": [
|
|
373
|
+
{
|
|
374
|
+
"name": "leading"
|
|
375
|
+
},
|
|
376
|
+
{
|
|
377
|
+
"name": "leading fill"
|
|
378
|
+
},
|
|
379
|
+
{
|
|
380
|
+
"name": "center"
|
|
381
|
+
},
|
|
382
|
+
{
|
|
383
|
+
"name": "trailing"
|
|
384
|
+
},
|
|
385
|
+
{
|
|
386
|
+
"name": "fill"
|
|
387
|
+
},
|
|
388
|
+
{
|
|
389
|
+
"name": "space-between"
|
|
390
|
+
}
|
|
391
|
+
]
|
|
361
392
|
},
|
|
362
393
|
{
|
|
363
|
-
"name": "
|
|
394
|
+
"name": "templat",
|
|
364
395
|
"description": "Value Type: “auto spacer” | “auto auto spacer” | “auto auto auto spacer”",
|
|
365
396
|
"values": [
|
|
366
397
|
{
|