vira 31.24.2 → 31.25.1
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/dist/elements/pop-up/vira-menu-item.element.d.ts +8 -1
- package/dist/elements/pop-up/vira-menu-item.element.js +26 -2
- package/dist/elements/pop-up/vira-pop-up-trigger.element.js +9 -0
- package/dist/elements/vira-absolute-time.element.d.ts +8 -0
- package/dist/elements/vira-absolute-time.element.js +5 -2
- package/dist/elements/vira-date-input.element.d.ts +3 -1
- package/dist/elements/vira-date-input.element.js +2 -1
- package/dist/elements/vira-form.element.js +1 -0
- package/dist/util/vira-form-fields.d.ts +2 -0
- package/package.json +15 -15
|
@@ -22,4 +22,11 @@ export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefin
|
|
|
22
22
|
}>, {
|
|
23
23
|
/** Removes event listeners registered during init. */
|
|
24
24
|
cleanupListeners: undefined | (() => void);
|
|
25
|
-
}, {
|
|
25
|
+
}, {
|
|
26
|
+
/**
|
|
27
|
+
* Fired when this menu item is activated by the user (a non-disabled click). Pop-up
|
|
28
|
+
* containers (e.g. `ViraPopUpTrigger`) listen to this to close the pop-up on selection,
|
|
29
|
+
* gated by `keepOpenAfterInteraction`.
|
|
30
|
+
*/
|
|
31
|
+
activate: import("element-vir").DefineEvent<undefined>;
|
|
32
|
+
}, "vira-menu-item-selected" | "vira-menu-item-disabled" | "vira-menu-item-enabled" | "vira-menu-item-default-icon" | "vira-menu-item-default-styles", "vira-menu-item-", readonly [], readonly []>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { assertWrap } from '@augment-vir/assert';
|
|
2
|
-
import { css, html } from 'element-vir';
|
|
2
|
+
import { css, defineElementEvent, html } from 'element-vir';
|
|
3
3
|
import { listenTo } from 'typed-event-target';
|
|
4
4
|
import { Check24Icon } from '../../icons/icon-svgs/24/check-24.icon.js';
|
|
5
5
|
import { viraFormCssVars } from '../../styles/form-styles.js';
|
|
@@ -20,6 +20,14 @@ export const ViraMenuItem = defineViraElement()({
|
|
|
20
20
|
cleanupListeners: undefined,
|
|
21
21
|
};
|
|
22
22
|
},
|
|
23
|
+
events: {
|
|
24
|
+
/**
|
|
25
|
+
* Fired when this menu item is activated by the user (a non-disabled click). Pop-up
|
|
26
|
+
* containers (e.g. `ViraPopUpTrigger`) listen to this to close the pop-up on selection,
|
|
27
|
+
* gated by `keepOpenAfterInteraction`.
|
|
28
|
+
*/
|
|
29
|
+
activate: defineElementEvent(),
|
|
30
|
+
},
|
|
23
31
|
hostClasses: {
|
|
24
32
|
'vira-menu-item-selected': ({ inputs }) => !!inputs.selected || !!inputs.iconOverride,
|
|
25
33
|
'vira-menu-item-disabled': ({ inputs }) => !!inputs.disabled,
|
|
@@ -95,7 +103,7 @@ export const ViraMenuItem = defineViraElement()({
|
|
|
95
103
|
min-width: 0;
|
|
96
104
|
}
|
|
97
105
|
`,
|
|
98
|
-
init({ state, updateState, host, inputs }) {
|
|
106
|
+
init({ state, updateState, host, inputs, dispatch, events }) {
|
|
99
107
|
host.setAttribute('role', 'menuitem');
|
|
100
108
|
host.setAttribute('tabindex', inputs.disabled ? '-1' : '0');
|
|
101
109
|
host.setAttribute('aria-selected', String(!!inputs.selected));
|
|
@@ -152,6 +160,22 @@ export const ViraMenuItem = defineViraElement()({
|
|
|
152
160
|
const listenerRemovers = [
|
|
153
161
|
listenTo(host, 'click', propagateMouseEvent),
|
|
154
162
|
listenTo(host, 'mousedown', propagateMouseEvent),
|
|
163
|
+
/**
|
|
164
|
+
* Emit `select` on a non-disabled activation so the containing pop-up can close. This
|
|
165
|
+
* uses the _capture_ phase because interactive slotted content can stop the click from
|
|
166
|
+
* bubbling back up to this host (which would prevent a bubble-phase listener from ever
|
|
167
|
+
* running). The `propagating` guard skips the synthetic click that
|
|
168
|
+
* `propagateMouseEvent` re-dispatches onto slotted content, so `select` fires exactly
|
|
169
|
+
* once per activation.
|
|
170
|
+
*/
|
|
171
|
+
listenTo(host, 'click', (event) => {
|
|
172
|
+
if (propagating[event.type] || inputs.disabled) {
|
|
173
|
+
return;
|
|
174
|
+
}
|
|
175
|
+
dispatch(new events.activate(undefined));
|
|
176
|
+
}, {
|
|
177
|
+
capture: true,
|
|
178
|
+
}),
|
|
155
179
|
listenTo(host, 'mouseenter', () => {
|
|
156
180
|
if (!inputs.disabled) {
|
|
157
181
|
host.focus();
|
|
@@ -7,6 +7,7 @@ import { noNativeFormStyles, noUserSelect, viraDisabledStyles } from '../../styl
|
|
|
7
7
|
import { defineViraElement } from '../../util/define-vira-element.js';
|
|
8
8
|
import { triggerPopUpState } from '../../util/pop-up-helpers.js';
|
|
9
9
|
import { HidePopUpEvent, isInputLikeElement, NavSelectEvent, PopUpManager, } from '../../util/pop-up-manager.js';
|
|
10
|
+
import { ViraMenuItem } from './vira-menu-item.element.js';
|
|
10
11
|
/**
|
|
11
12
|
* Anchor options for pop-ups.
|
|
12
13
|
*
|
|
@@ -359,6 +360,14 @@ export const ViraPopUpTrigger = defineViraElement()({
|
|
|
359
360
|
if (event.composedPath().includes(dropdownTrigger)) {
|
|
360
361
|
respondToClick(event);
|
|
361
362
|
}
|
|
363
|
+
})}
|
|
364
|
+
${listen(ViraMenuItem.events.activate, (event) => {
|
|
365
|
+
if (state.showPopUpResult) {
|
|
366
|
+
triggerPopUp({
|
|
367
|
+
emitEvent: true,
|
|
368
|
+
open: false,
|
|
369
|
+
}, event);
|
|
370
|
+
}
|
|
362
371
|
})}
|
|
363
372
|
>
|
|
364
373
|
<div class="dropdown-trigger">
|
|
@@ -17,6 +17,13 @@ export declare const ViraAbsoluteTime: import("element-vir").DeclarativeElementD
|
|
|
17
17
|
* time of day would be meaningless noise.
|
|
18
18
|
*/
|
|
19
19
|
dateOnly: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Timezone the value is displayed in. Defaults to the user's timezone. Set this for values
|
|
22
|
+
* that are conceptually anchored to a specific timezone (e.g. a date-only value stored at
|
|
23
|
+
* midnight UTC), where converting to the user's timezone would shift the displayed
|
|
24
|
+
* date/time.
|
|
25
|
+
*/
|
|
26
|
+
timezone: string;
|
|
20
27
|
}>, {}, {}, "vira-absolute-time-", "vira-absolute-time-", readonly [], readonly []>;
|
|
21
28
|
/**
|
|
22
29
|
* Formats a `FullDate` into the same absolute string rendered by {@link ViraAbsoluteTime}.
|
|
@@ -25,4 +32,5 @@ export declare const ViraAbsoluteTime: import("element-vir").DeclarativeElementD
|
|
|
25
32
|
*/
|
|
26
33
|
export declare function formatAbsoluteTime(time: Readonly<FullDate>, options?: Readonly<PartialWithUndefined<{
|
|
27
34
|
dateOnly: boolean;
|
|
35
|
+
timezone: string;
|
|
28
36
|
}>>): string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createFullDateInUserTimezone, toFormattedString } from 'date-vir';
|
|
1
|
+
import { createFullDate, createFullDateInUserTimezone, toFormattedString, } from 'date-vir';
|
|
2
2
|
import { css } from 'element-vir';
|
|
3
3
|
import { defineViraElement } from '../util/define-vira-element.js';
|
|
4
4
|
/**
|
|
@@ -19,6 +19,7 @@ export const ViraAbsoluteTime = defineViraElement()({
|
|
|
19
19
|
render({ inputs }) {
|
|
20
20
|
return formatAbsoluteTime(inputs.time, {
|
|
21
21
|
dateOnly: inputs.dateOnly,
|
|
22
|
+
timezone: inputs.timezone,
|
|
22
23
|
});
|
|
23
24
|
},
|
|
24
25
|
});
|
|
@@ -28,5 +29,7 @@ export const ViraAbsoluteTime = defineViraElement()({
|
|
|
28
29
|
* @category Time
|
|
29
30
|
*/
|
|
30
31
|
export function formatAbsoluteTime(time, options) {
|
|
31
|
-
return toFormattedString(
|
|
32
|
+
return toFormattedString(options?.timezone
|
|
33
|
+
? createFullDate(time, options.timezone)
|
|
34
|
+
: createFullDateInUserTimezone(time), options?.dateOnly ? 'MMM d, yyyy' : 'MMM d, yyyy HH:mm ZZZZ');
|
|
32
35
|
}
|
|
@@ -23,6 +23,8 @@ export declare const ViraDateInput: import("element-vir").DeclarativeElementDefi
|
|
|
23
23
|
isDisabled: boolean;
|
|
24
24
|
/** If true, the current value is rendered as plain text instead of an editable input. */
|
|
25
25
|
isReadonly: boolean;
|
|
26
|
+
/** Timezone used to interpret the selected date. Defaults to the user's timezone. */
|
|
27
|
+
timezone: string;
|
|
26
28
|
}>, {
|
|
27
29
|
/** Used to couple the label and input together. Not applied when no label is provided. */
|
|
28
30
|
randomId: string;
|
|
@@ -36,6 +38,6 @@ export declare const ViraDateInput: import("element-vir").DeclarativeElementDefi
|
|
|
36
38
|
month: import("date-vir").MonthNumber;
|
|
37
39
|
day: import("date-vir").DayOfMonth;
|
|
38
40
|
second: import("date-vir").Second;
|
|
39
|
-
timezone:
|
|
41
|
+
timezone: string;
|
|
40
42
|
} | undefined>;
|
|
41
43
|
}, "vira-date-input-error" | "vira-date-input-disabled", "vira-date-input-", readonly [], readonly []>;
|
|
@@ -79,6 +79,7 @@ export const ViraDateInput = defineViraElement()({
|
|
|
79
79
|
<${ViraAbsoluteTime.assign({
|
|
80
80
|
time: inputs.value,
|
|
81
81
|
dateOnly: true,
|
|
82
|
+
timezone: inputs.timezone,
|
|
82
83
|
})}></${ViraAbsoluteTime}>
|
|
83
84
|
`
|
|
84
85
|
: html `
|
|
@@ -113,7 +114,7 @@ export const ViraDateInput = defineViraElement()({
|
|
|
113
114
|
.value=${inputValue}
|
|
114
115
|
${listen('input', (event) => {
|
|
115
116
|
const element = extractEventTarget(event, HTMLInputElement);
|
|
116
|
-
dispatch(new events.valueChange(parseInputElementValue(element, userTimezone)));
|
|
117
|
+
dispatch(new events.valueChange(parseInputElementValue(element, inputs.timezone || userTimezone)));
|
|
117
118
|
})}
|
|
118
119
|
/>
|
|
119
120
|
`;
|
|
@@ -114,6 +114,8 @@ export type ViraFormField = ({
|
|
|
114
114
|
min: FullDate;
|
|
115
115
|
/** Upper bound for selectable dates. Defaults to 10 years from now when omitted. */
|
|
116
116
|
max: FullDate;
|
|
117
|
+
/** Timezone used to interpret the selected date. Defaults to the user's timezone. */
|
|
118
|
+
timezone: string;
|
|
117
119
|
}> & CommonViraFormFields);
|
|
118
120
|
/**
|
|
119
121
|
* A collection of form fields for `ViraForm`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vira",
|
|
3
|
-
"version": "31.
|
|
3
|
+
"version": "31.25.1",
|
|
4
4
|
"description": "A simple and highly versatile design system using element-vir.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design",
|
|
@@ -38,37 +38,37 @@
|
|
|
38
38
|
"test:docs": "virmator docs check"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@augment-vir/assert": "^31.
|
|
42
|
-
"@augment-vir/common": "^31.
|
|
43
|
-
"@augment-vir/web": "^31.
|
|
44
|
-
"@electrovir/color": "^1.7.
|
|
41
|
+
"@augment-vir/assert": "^31.73.2",
|
|
42
|
+
"@augment-vir/common": "^31.73.2",
|
|
43
|
+
"@augment-vir/web": "^31.73.2",
|
|
44
|
+
"@electrovir/color": "^1.7.10",
|
|
45
45
|
"@electrovir/local-storage-client": "^0.1.0",
|
|
46
|
-
"date-vir": "^8.
|
|
47
|
-
"device-navigation": "^4.
|
|
46
|
+
"date-vir": "^8.6.1",
|
|
47
|
+
"device-navigation": "^4.7.2",
|
|
48
48
|
"json-schema-to-ts": "^3.1.1",
|
|
49
49
|
"lit-css-vars": "^3.6.2",
|
|
50
|
-
"object-shape-tester": "^6.
|
|
50
|
+
"object-shape-tester": "^6.14.0",
|
|
51
51
|
"observavir": "^2.3.2",
|
|
52
52
|
"page-active": "^1.0.3",
|
|
53
53
|
"spa-router-vir": "^6.6.0",
|
|
54
|
-
"type-fest": "^5.
|
|
55
|
-
"typed-event-target": "^4.3.
|
|
54
|
+
"type-fest": "^5.7.0",
|
|
55
|
+
"typed-event-target": "^4.3.1"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
|
-
"@augment-vir/test": "^31.
|
|
58
|
+
"@augment-vir/test": "^31.73.2",
|
|
59
59
|
"@web/dev-server-esbuild": "^1.0.5",
|
|
60
60
|
"@web/test-runner": "^0.20.2",
|
|
61
61
|
"@web/test-runner-commands": "^0.9.0",
|
|
62
62
|
"@web/test-runner-playwright": "^0.11.1",
|
|
63
63
|
"@web/test-runner-visual-regression": "^0.10.0",
|
|
64
|
-
"esbuild": "^0.28.
|
|
64
|
+
"esbuild": "^0.28.1",
|
|
65
65
|
"istanbul-smart-text-reporter": "^1.1.5",
|
|
66
|
-
"lucide-static": "^1.
|
|
66
|
+
"lucide-static": "^1.21.0",
|
|
67
67
|
"markdown-code-example-inserter": "^3.0.5",
|
|
68
68
|
"theme-vir": "^28.25.0",
|
|
69
69
|
"typedoc": "^0.28.19",
|
|
70
|
-
"typescript": "
|
|
71
|
-
"vite": "^8.0.
|
|
70
|
+
"typescript": "6.0.3",
|
|
71
|
+
"vite": "^8.0.16",
|
|
72
72
|
"vite-tsconfig-paths": "^6.1.1"
|
|
73
73
|
},
|
|
74
74
|
"peerDependencies": {
|