vira 26.13.0 → 27.0.0
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/define-vira-element.d.ts +1 -1
- package/dist/elements/index.d.ts +7 -7
- package/dist/elements/index.js +7 -7
- package/dist/elements/{pop-up/pop-up-helpers.d.ts → popover/popover-helpers.d.ts} +6 -6
- package/dist/elements/{pop-up/pop-up-helpers.js → popover/popover-helpers.js} +5 -5
- package/dist/elements/{pop-up → popover}/vira-menu-item.element.d.ts +3 -3
- package/dist/elements/{pop-up → popover}/vira-menu-item.element.js +1 -1
- package/dist/elements/popover/vira-menu-trigger.element.d.ts +41 -0
- package/dist/elements/{pop-up → popover}/vira-menu-trigger.element.js +29 -33
- package/dist/elements/{pop-up → popover}/vira-menu.element.d.ts +3 -3
- package/dist/elements/{pop-up → popover}/vira-menu.element.js +2 -2
- package/dist/elements/popover/vira-popover-menu.element.d.ts +35 -0
- package/dist/elements/{pop-up/vira-pop-up-menu.element.js → popover/vira-popover-menu.element.js} +23 -23
- package/dist/elements/popover/vira-popover-trigger.element.d.ts +67 -0
- package/dist/elements/popover/vira-popover-trigger.element.js +301 -0
- package/dist/elements/vira-bold-text.element.d.ts +1 -1
- package/dist/elements/vira-button.element.d.ts +1 -1
- package/dist/elements/vira-checkbox.element.d.ts +1 -1
- package/dist/elements/vira-collapsible-wrapper.element.d.ts +1 -1
- package/dist/elements/vira-dropdown.element.d.ts +7 -19
- package/dist/elements/vira-dropdown.element.js +8 -10
- package/dist/elements/vira-icon.element.d.ts +1 -1
- package/dist/elements/vira-image.element.d.ts +1 -1
- package/dist/elements/vira-input.element.d.ts +1 -1
- package/dist/elements/vira-input.element.js +17 -8
- package/dist/elements/vira-link.element.d.ts +31 -3
- package/dist/elements/vira-progress.element.d.ts +1 -1
- package/dist/util/index.d.ts +1 -1
- package/dist/util/index.js +1 -1
- package/dist/util/{pop-up-manager.d.ts → popover-manager.d.ts} +60 -39
- package/dist/util/{pop-up-manager.js → popover-manager.js} +42 -45
- package/package.json +10 -10
- package/dist/elements/pop-up/vira-menu-trigger.element.d.ts +0 -55
- package/dist/elements/pop-up/vira-pop-up-menu.element.d.ts +0 -35
- package/dist/elements/pop-up/vira-pop-up-trigger.element.d.ts +0 -81
- package/dist/elements/pop-up/vira-pop-up-trigger.element.js +0 -282
- /package/dist/elements/{pop-up/pop-up-menu-item.d.ts → popover/popover-menu-item.d.ts} +0 -0
- /package/dist/elements/{pop-up/pop-up-menu-item.js → popover/popover-menu-item.js} +0 -0
|
@@ -15,4 +15,4 @@ export type ViraTagName = `${typeof ViraTagNamePrefix}${string}`;
|
|
|
15
15
|
*
|
|
16
16
|
* @category Internal
|
|
17
17
|
*/
|
|
18
|
-
export declare const defineViraElement: <Inputs extends {}>(...errorParams: import("element-vir").DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends `vira-${string}`, State extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: import("element-vir").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("element-vir").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
|
|
18
|
+
export declare const defineViraElement: <Inputs extends {}>(...errorParams: import("element-vir").DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends `vira-${string}`, State extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly [], const TestIds extends ReadonlyArray<string> = readonly []>(inputs: import("element-vir").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => import("element-vir").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
|
package/dist/elements/index.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
export * from './define-vira-element.js';
|
|
2
|
-
export * from './
|
|
3
|
-
export * from './
|
|
4
|
-
export * from './
|
|
5
|
-
export * from './
|
|
6
|
-
export * from './
|
|
7
|
-
export * from './
|
|
8
|
-
export * from './
|
|
2
|
+
export * from './popover/popover-helpers.js';
|
|
3
|
+
export * from './popover/popover-menu-item.js';
|
|
4
|
+
export * from './popover/vira-menu-item.element.js';
|
|
5
|
+
export * from './popover/vira-menu-trigger.element.js';
|
|
6
|
+
export * from './popover/vira-menu.element.js';
|
|
7
|
+
export * from './popover/vira-popover-menu.element.js';
|
|
8
|
+
export * from './popover/vira-popover-trigger.element.js';
|
|
9
9
|
export * from './vira-bold-text.element.js';
|
|
10
10
|
export * from './vira-button.element.js';
|
|
11
11
|
export * from './vira-checkbox.element.js';
|
package/dist/elements/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
export * from './define-vira-element.js';
|
|
2
|
-
export * from './
|
|
3
|
-
export * from './
|
|
4
|
-
export * from './
|
|
5
|
-
export * from './
|
|
6
|
-
export * from './
|
|
7
|
-
export * from './
|
|
8
|
-
export * from './
|
|
2
|
+
export * from './popover/popover-helpers.js';
|
|
3
|
+
export * from './popover/popover-menu-item.js';
|
|
4
|
+
export * from './popover/vira-menu-item.element.js';
|
|
5
|
+
export * from './popover/vira-menu-trigger.element.js';
|
|
6
|
+
export * from './popover/vira-menu.element.js';
|
|
7
|
+
export * from './popover/vira-popover-menu.element.js';
|
|
8
|
+
export * from './popover/vira-popover-trigger.element.js';
|
|
9
9
|
export * from './vira-bold-text.element.js';
|
|
10
10
|
export * from './vira-button.element.js';
|
|
11
11
|
export * from './vira-checkbox.element.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
import { type MenuItem } from './
|
|
1
|
+
import { type PopoverManager, type ShowPopoverResult } from '../../util/popover-manager.js';
|
|
2
|
+
import { type MenuItem } from './popover-menu-item.js';
|
|
3
3
|
/**
|
|
4
4
|
* Verifies that all items have unique ids.
|
|
5
5
|
*
|
|
@@ -18,13 +18,13 @@ export declare function updateSelectedItems(
|
|
|
18
18
|
/** The item that should be newly toggled. */
|
|
19
19
|
newItem: Readonly<MenuItem>, currentSelection?: ReadonlyArray<PropertyKey>, isMultiSelect?: boolean): PropertyKey[];
|
|
20
20
|
/**
|
|
21
|
-
* Handles toggling
|
|
21
|
+
* Handles toggling popover state for `ViraDropdown`.
|
|
22
22
|
*
|
|
23
23
|
* @category Internal
|
|
24
24
|
*/
|
|
25
|
-
export declare function
|
|
25
|
+
export declare function triggerPopoverState({ open, callback, popoverManager, host, }: {
|
|
26
26
|
open: boolean;
|
|
27
|
-
|
|
27
|
+
popoverManager: PopoverManager;
|
|
28
28
|
host: HTMLElement;
|
|
29
|
-
callback?: ((
|
|
29
|
+
callback?: ((showPopoverResult: ShowPopoverResult | undefined) => void) | undefined;
|
|
30
30
|
}): void;
|
|
@@ -42,17 +42,17 @@ newItem, currentSelection = [], isMultiSelect = false) {
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
/**
|
|
45
|
-
* Handles toggling
|
|
45
|
+
* Handles toggling popover state for `ViraDropdown`.
|
|
46
46
|
*
|
|
47
47
|
* @category Internal
|
|
48
48
|
*/
|
|
49
|
-
export function
|
|
49
|
+
export function triggerPopoverState({ open, callback, popoverManager, host, }) {
|
|
50
50
|
if (open) {
|
|
51
|
-
const
|
|
52
|
-
callback?.(
|
|
51
|
+
const showPopoverResult = popoverManager.showPopover(host);
|
|
52
|
+
callback?.(showPopoverResult);
|
|
53
53
|
}
|
|
54
54
|
else {
|
|
55
|
-
|
|
55
|
+
popoverManager.removePopover();
|
|
56
56
|
callback?.(undefined);
|
|
57
57
|
}
|
|
58
58
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { type PartialWithUndefined } from '@augment-vir/common';
|
|
2
|
-
import { type MenuItem } from './
|
|
2
|
+
import { type MenuItem } from './popover-menu-item.js';
|
|
3
3
|
/**
|
|
4
4
|
* An element for an individual menu item.
|
|
5
5
|
*
|
|
6
|
-
* @category
|
|
6
|
+
* @category Popover
|
|
7
7
|
* @category Elements
|
|
8
8
|
*/
|
|
9
9
|
export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefinition<"vira-menu-item", Readonly<{
|
|
@@ -16,4 +16,4 @@ export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefin
|
|
|
16
16
|
label: MenuItem["label"];
|
|
17
17
|
/** If `true`, does not render the selected check icon. */
|
|
18
18
|
hideCheckIcon: boolean;
|
|
19
|
-
}>>, {}, {}, "vira-menu-item-selected", "vira-menu-item-", readonly []>;
|
|
19
|
+
}>>, {}, {}, "vira-menu-item-selected", "vira-menu-item-", readonly [], readonly []>;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { type PartialWithUndefined } from '@augment-vir/common';
|
|
2
|
+
import { type NavController } from 'device-navigation';
|
|
3
|
+
import { type PopoverManager, type ShowPopoverResult } from '../../util/popover-manager.js';
|
|
4
|
+
import { type MenuItem } from './popover-menu-item.js';
|
|
5
|
+
import { type PopoverMenuCornerStyle } from './vira-popover-menu.element.js';
|
|
6
|
+
import { type PopoverOffset } from './vira-popover-trigger.element.js';
|
|
7
|
+
/**
|
|
8
|
+
* Test ids for {@link ViraMenuTrigger}.
|
|
9
|
+
*
|
|
10
|
+
* @category Internal
|
|
11
|
+
*/
|
|
12
|
+
export declare const viraMenuTriggerTestIds: {
|
|
13
|
+
menu: string;
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* A more specific wrapper of `ViraPopoverTrigger` that always opens a menu.
|
|
17
|
+
*
|
|
18
|
+
* @category Popover
|
|
19
|
+
* @category Elements
|
|
20
|
+
*/
|
|
21
|
+
export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDefinition<"vira-menu-trigger", {
|
|
22
|
+
items: ReadonlyArray<Readonly<MenuItem>>;
|
|
23
|
+
} & PartialWithUndefined<{
|
|
24
|
+
/** The selected item ids from the given `items` object. */
|
|
25
|
+
selected: ReadonlyArray<PropertyKey>;
|
|
26
|
+
isDisabled: boolean;
|
|
27
|
+
isMultiSelect: boolean;
|
|
28
|
+
z_debug_forceOpenState: boolean;
|
|
29
|
+
popoverOffset: PopoverOffset;
|
|
30
|
+
/** Hide menu item check mark icons. */
|
|
31
|
+
hideCheckIcons: boolean;
|
|
32
|
+
menuCornerStyle: PopoverMenuCornerStyle;
|
|
33
|
+
}>, {
|
|
34
|
+
navController: undefined | NavController;
|
|
35
|
+
popoverManager: undefined | PopoverManager;
|
|
36
|
+
/** `undefined` means the popover is not currently showing. */
|
|
37
|
+
showPopoverResult: ShowPopoverResult | undefined;
|
|
38
|
+
}, {
|
|
39
|
+
itemActivate: import("element-vir").DefineEvent<PropertyKey[]>;
|
|
40
|
+
openChange: import("element-vir").DefineEvent<ShowPopoverResult | undefined>;
|
|
41
|
+
}, "vira-menu-trigger-", "vira-menu-trigger-", readonly [], readonly []>;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { classMap, css, defineElementEvent, html, listen, nothing, testId } from 'element-vir';
|
|
2
2
|
import { defineViraElement } from '../define-vira-element.js';
|
|
3
|
-
import { updateSelectedItems } from './
|
|
3
|
+
import { updateSelectedItems } from './popover-helpers.js';
|
|
4
4
|
import { ViraMenu } from './vira-menu.element.js';
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
5
|
+
import { PopoverMenuDirection, ViraPopoverMenu, } from './vira-popover-menu.element.js';
|
|
6
|
+
import { ViraPopoverTrigger } from './vira-popover-trigger.element.js';
|
|
7
7
|
/**
|
|
8
8
|
* Test ids for {@link ViraMenuTrigger}.
|
|
9
9
|
*
|
|
@@ -13,9 +13,9 @@ export const viraMenuTriggerTestIds = {
|
|
|
13
13
|
menu: 'menu-trigger-menu',
|
|
14
14
|
};
|
|
15
15
|
/**
|
|
16
|
-
* A more specific wrapper of `
|
|
16
|
+
* A more specific wrapper of `ViraPopoverTrigger` that always opens a menu.
|
|
17
17
|
*
|
|
18
|
-
* @category
|
|
18
|
+
* @category Popover
|
|
19
19
|
* @category Elements
|
|
20
20
|
*/
|
|
21
21
|
export const ViraMenuTrigger = defineViraElement()({
|
|
@@ -28,7 +28,7 @@ export const ViraMenuTrigger = defineViraElement()({
|
|
|
28
28
|
max-width: 100%;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
${
|
|
31
|
+
${ViraPopoverTrigger} {
|
|
32
32
|
width: 100%;
|
|
33
33
|
}
|
|
34
34
|
|
|
@@ -43,38 +43,37 @@ export const ViraMenuTrigger = defineViraElement()({
|
|
|
43
43
|
state() {
|
|
44
44
|
return {
|
|
45
45
|
navController: undefined,
|
|
46
|
-
|
|
47
|
-
/** `undefined` means the
|
|
48
|
-
|
|
46
|
+
popoverManager: undefined,
|
|
47
|
+
/** `undefined` means the popover is not currently showing. */
|
|
48
|
+
showPopoverResult: undefined,
|
|
49
49
|
};
|
|
50
50
|
},
|
|
51
51
|
render({ inputs, state, updateState, dispatch, events }) {
|
|
52
52
|
return html `
|
|
53
|
-
<${
|
|
53
|
+
<${ViraPopoverTrigger.assign({
|
|
54
54
|
isDisabled: inputs.isDisabled,
|
|
55
55
|
keepOpenAfterInteraction: true,
|
|
56
56
|
z_debug_forceOpenState: inputs.z_debug_forceOpenState,
|
|
57
|
-
|
|
58
|
-
horizontalAnchor: inputs.horizontalAnchor || HorizontalAnchor.Left,
|
|
57
|
+
popoverOffset: inputs.popoverOffset,
|
|
59
58
|
})}
|
|
60
59
|
class=${classMap({
|
|
61
|
-
open: !!state.
|
|
60
|
+
open: !!state.showPopoverResult,
|
|
62
61
|
})}
|
|
63
|
-
${listen(
|
|
62
|
+
${listen(ViraPopoverTrigger.events.init, (event) => {
|
|
64
63
|
updateState({
|
|
65
64
|
navController: event.detail.navController,
|
|
66
|
-
|
|
65
|
+
popoverManager: event.detail.popoverManager,
|
|
67
66
|
});
|
|
68
67
|
})}
|
|
69
|
-
${listen(
|
|
70
|
-
if (!!state.
|
|
68
|
+
${listen(ViraPopoverTrigger.events.openChange, (event) => {
|
|
69
|
+
if (!!state.showPopoverResult !== !!event.detail) {
|
|
71
70
|
dispatch(new events.openChange(event.detail));
|
|
72
71
|
}
|
|
73
72
|
updateState({
|
|
74
|
-
|
|
73
|
+
showPopoverResult: event.detail,
|
|
75
74
|
});
|
|
76
75
|
})}
|
|
77
|
-
${listen(
|
|
76
|
+
${listen(ViraPopoverTrigger.events.navSelect, (event) => {
|
|
78
77
|
const itemIndex = event.detail.x;
|
|
79
78
|
const item = inputs.items[itemIndex];
|
|
80
79
|
if (!item) {
|
|
@@ -83,26 +82,23 @@ export const ViraMenuTrigger = defineViraElement()({
|
|
|
83
82
|
dispatch(new events.itemActivate(updateSelectedItems(item, inputs.selected, inputs.isMultiSelect)));
|
|
84
83
|
if (!inputs.isMultiSelect) {
|
|
85
84
|
/**
|
|
86
|
-
* Defer
|
|
85
|
+
* Defer popover removal to prevent race conditions with element-internal
|
|
87
86
|
* click handlers.
|
|
88
87
|
*/
|
|
89
|
-
globalThis.setTimeout(() => state.
|
|
88
|
+
globalThis.setTimeout(() => state.popoverManager?.removePopover());
|
|
90
89
|
}
|
|
91
90
|
})}
|
|
92
91
|
>
|
|
93
|
-
<slot slot=${
|
|
94
|
-
${state.navController && state.
|
|
92
|
+
<slot slot=${ViraPopoverTrigger.slotNames.trigger}></slot>
|
|
93
|
+
${state.navController && state.showPopoverResult
|
|
95
94
|
? html `
|
|
96
|
-
<${
|
|
97
|
-
direction: state.
|
|
98
|
-
?
|
|
99
|
-
:
|
|
95
|
+
<${ViraPopoverMenu.assign({
|
|
96
|
+
direction: state.showPopoverResult.popDown
|
|
97
|
+
? PopoverMenuDirection.Downwards
|
|
98
|
+
: PopoverMenuDirection.Upwards,
|
|
100
99
|
cornerStyle: inputs.menuCornerStyle,
|
|
101
100
|
})}
|
|
102
|
-
slot=${
|
|
103
|
-
class=${classMap({
|
|
104
|
-
'full-width-menu': inputs.horizontalAnchor === HorizontalAnchor.Both,
|
|
105
|
-
})}
|
|
101
|
+
slot=${ViraPopoverTrigger.slotNames.popover}
|
|
106
102
|
>
|
|
107
103
|
<${ViraMenu.assign({
|
|
108
104
|
items: inputs.items,
|
|
@@ -113,10 +109,10 @@ export const ViraMenuTrigger = defineViraElement()({
|
|
|
113
109
|
})}
|
|
114
110
|
${testId(viraMenuTriggerTestIds.menu)}
|
|
115
111
|
></${ViraMenu}>
|
|
116
|
-
</${
|
|
112
|
+
</${ViraPopoverMenu}>
|
|
117
113
|
`
|
|
118
114
|
: nothing}
|
|
119
|
-
</${
|
|
115
|
+
</${ViraPopoverTrigger}>
|
|
120
116
|
`;
|
|
121
117
|
},
|
|
122
118
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type PartialWithUndefined } from '@augment-vir/common';
|
|
2
2
|
import { NavController } from 'device-navigation';
|
|
3
|
-
import { type MenuItem } from './
|
|
3
|
+
import { type MenuItem } from './popover-menu-item.js';
|
|
4
4
|
/**
|
|
5
5
|
* Test ids for {@link ViraMenu}.
|
|
6
6
|
*
|
|
@@ -14,7 +14,7 @@ export declare const viraMenuTestIds: {
|
|
|
14
14
|
* when items are selected or unselected, pass in a `NavController` instance and hook into its
|
|
15
15
|
* events.
|
|
16
16
|
*
|
|
17
|
-
* @category
|
|
17
|
+
* @category Popover
|
|
18
18
|
* @category Elements
|
|
19
19
|
*/
|
|
20
20
|
export declare const ViraMenu: import("element-vir").DeclarativeElementDefinition<"vira-menu", Readonly<{
|
|
@@ -35,4 +35,4 @@ export declare const ViraMenu: import("element-vir").DeclarativeElementDefinitio
|
|
|
35
35
|
hideCheckIcons: boolean;
|
|
36
36
|
}>>, {
|
|
37
37
|
internalNavController: NavController;
|
|
38
|
-
}, {}, "vira-menu-multiselect", "vira-menu-", readonly []>;
|
|
38
|
+
}, {}, "vira-menu-multiselect", "vira-menu-", readonly [], readonly []>;
|
|
@@ -5,7 +5,7 @@ import { viraFormCssVars } from '../../styles/form-styles.js';
|
|
|
5
5
|
import { noNativeFormStyles, viraDisabledStyles } from '../../styles/index.js';
|
|
6
6
|
import { defineViraElement } from '../define-vira-element.js';
|
|
7
7
|
import { ViraLink } from '../vira-link.element.js';
|
|
8
|
-
import { assertUniqueIdProps } from './
|
|
8
|
+
import { assertUniqueIdProps } from './popover-helpers.js';
|
|
9
9
|
import { ViraMenuItem } from './vira-menu-item.element.js';
|
|
10
10
|
/**
|
|
11
11
|
* Test ids for {@link ViraMenu}.
|
|
@@ -20,7 +20,7 @@ export const viraMenuTestIds = {
|
|
|
20
20
|
* when items are selected or unselected, pass in a `NavController` instance and hook into its
|
|
21
21
|
* events.
|
|
22
22
|
*
|
|
23
|
-
* @category
|
|
23
|
+
* @category Popover
|
|
24
24
|
* @category Elements
|
|
25
25
|
*/
|
|
26
26
|
export const ViraMenu = defineViraElement()({
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { type PartialWithUndefined } from '@augment-vir/common';
|
|
2
|
+
/**
|
|
3
|
+
* Possible corner styles for {@link ViraPopoverMenu}.
|
|
4
|
+
*
|
|
5
|
+
* @category Internal
|
|
6
|
+
*/
|
|
7
|
+
export declare enum PopoverMenuCornerStyle {
|
|
8
|
+
/** Rounding of corners depends on the open direction of the menu. */
|
|
9
|
+
Directional = "directional",
|
|
10
|
+
/** All of the menus corners should be rounded. */
|
|
11
|
+
AllRounded = "all-rounded",
|
|
12
|
+
/** None of the menus corners should be rounded. */
|
|
13
|
+
AllSquare = "all-square"
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Menu popover directions available for {@link ViraPopoverMenu}.
|
|
17
|
+
*
|
|
18
|
+
* @category Internal
|
|
19
|
+
*/
|
|
20
|
+
export declare enum PopoverMenuDirection {
|
|
21
|
+
Downwards = "downwards",
|
|
22
|
+
Upwards = "upwards"
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* A simple default style wrapper for popover menus.
|
|
26
|
+
*
|
|
27
|
+
* @category Popover
|
|
28
|
+
* @category Elements
|
|
29
|
+
*/
|
|
30
|
+
export declare const ViraPopoverMenu: import("element-vir").DeclarativeElementDefinition<"vira-popover-menu", PartialWithUndefined<{
|
|
31
|
+
/** @default PopoverMenuDirection.Downwards */
|
|
32
|
+
direction: PopoverMenuDirection;
|
|
33
|
+
/** @default PopoverMenuCornerStyle.Directional */
|
|
34
|
+
cornerStyle: PopoverMenuCornerStyle;
|
|
35
|
+
}>, {}, {}, "vira-popover-menu-open-upwards" | "vira-popover-menu-rounded" | "vira-popover-menu-square", "vira-popover-menu-", readonly [], readonly []>;
|
package/dist/elements/{pop-up/vira-pop-up-menu.element.js → popover/vira-popover-menu.element.js}
RENAMED
|
@@ -4,41 +4,41 @@ import { viraFormCssVars } from '../../styles/form-styles.js';
|
|
|
4
4
|
import { viraShadows } from '../../styles/shadows.js';
|
|
5
5
|
import { defineViraElement } from '../define-vira-element.js';
|
|
6
6
|
/**
|
|
7
|
-
* Possible corner styles for {@link
|
|
7
|
+
* Possible corner styles for {@link ViraPopoverMenu}.
|
|
8
8
|
*
|
|
9
9
|
* @category Internal
|
|
10
10
|
*/
|
|
11
|
-
export var
|
|
12
|
-
(function (
|
|
11
|
+
export var PopoverMenuCornerStyle;
|
|
12
|
+
(function (PopoverMenuCornerStyle) {
|
|
13
13
|
/** Rounding of corners depends on the open direction of the menu. */
|
|
14
|
-
|
|
14
|
+
PopoverMenuCornerStyle["Directional"] = "directional";
|
|
15
15
|
/** All of the menus corners should be rounded. */
|
|
16
|
-
|
|
16
|
+
PopoverMenuCornerStyle["AllRounded"] = "all-rounded";
|
|
17
17
|
/** None of the menus corners should be rounded. */
|
|
18
|
-
|
|
19
|
-
})(
|
|
18
|
+
PopoverMenuCornerStyle["AllSquare"] = "all-square";
|
|
19
|
+
})(PopoverMenuCornerStyle || (PopoverMenuCornerStyle = {}));
|
|
20
20
|
/**
|
|
21
|
-
* Menu
|
|
21
|
+
* Menu popover directions available for {@link ViraPopoverMenu}.
|
|
22
22
|
*
|
|
23
23
|
* @category Internal
|
|
24
24
|
*/
|
|
25
|
-
export var
|
|
26
|
-
(function (
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
})(
|
|
25
|
+
export var PopoverMenuDirection;
|
|
26
|
+
(function (PopoverMenuDirection) {
|
|
27
|
+
PopoverMenuDirection["Downwards"] = "downwards";
|
|
28
|
+
PopoverMenuDirection["Upwards"] = "upwards";
|
|
29
|
+
})(PopoverMenuDirection || (PopoverMenuDirection = {}));
|
|
30
30
|
/**
|
|
31
|
-
* A simple default style wrapper for
|
|
31
|
+
* A simple default style wrapper for popover menus.
|
|
32
32
|
*
|
|
33
|
-
* @category
|
|
33
|
+
* @category Popover
|
|
34
34
|
* @category Elements
|
|
35
35
|
*/
|
|
36
|
-
export const
|
|
37
|
-
tagName: 'vira-
|
|
36
|
+
export const ViraPopoverMenu = defineViraElement()({
|
|
37
|
+
tagName: 'vira-popover-menu',
|
|
38
38
|
hostClasses: {
|
|
39
|
-
'vira-
|
|
40
|
-
'vira-
|
|
41
|
-
'vira-
|
|
39
|
+
'vira-popover-menu-open-upwards': ({ inputs }) => inputs.direction === PopoverMenuDirection.Upwards,
|
|
40
|
+
'vira-popover-menu-rounded': ({ inputs }) => inputs.cornerStyle === PopoverMenuCornerStyle.AllRounded,
|
|
41
|
+
'vira-popover-menu-square': ({ inputs }) => inputs.cornerStyle === PopoverMenuCornerStyle.AllSquare,
|
|
42
42
|
},
|
|
43
43
|
styles: ({ hostClasses }) => css `
|
|
44
44
|
:host {
|
|
@@ -57,18 +57,18 @@ export const ViraPopUpMenu = defineViraElement()({
|
|
|
57
57
|
${viraShadows.menuShadow}
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
${hostClasses['vira-
|
|
60
|
+
${hostClasses['vira-popover-menu-open-upwards'].selector} {
|
|
61
61
|
${viraShadows.menuShadowReversed}
|
|
62
62
|
border-radius: ${viraBorders['vira-form-input-radius'].value};
|
|
63
63
|
border-bottom-left-radius: 0;
|
|
64
64
|
border-bottom-right-radius: 0;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
${hostClasses['vira-
|
|
67
|
+
${hostClasses['vira-popover-menu-square'].selector} {
|
|
68
68
|
border-radius: 0;
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
${hostClasses['vira-
|
|
71
|
+
${hostClasses['vira-popover-menu-rounded'].selector} {
|
|
72
72
|
border-radius: ${viraBorders['vira-form-input-radius'].value};
|
|
73
73
|
}
|
|
74
74
|
`,
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { type PartialWithUndefined } from '@augment-vir/common';
|
|
2
|
+
import { NavController, type Coords } from 'device-navigation';
|
|
3
|
+
import { PopoverManager, type ShowPopoverResult } from '../../util/popover-manager.js';
|
|
4
|
+
/**
|
|
5
|
+
* Offsets applied to any menu opened by {@link ViraPopoverTrigger}.
|
|
6
|
+
*
|
|
7
|
+
* @category Internal
|
|
8
|
+
*/
|
|
9
|
+
export type PopoverOffset = PartialWithUndefined<{
|
|
10
|
+
vertical: number;
|
|
11
|
+
right: number;
|
|
12
|
+
left: number;
|
|
13
|
+
}>;
|
|
14
|
+
/**
|
|
15
|
+
* Anchor options for popovers.
|
|
16
|
+
*
|
|
17
|
+
* @category Internal
|
|
18
|
+
*/
|
|
19
|
+
export declare enum HorizontalAnchor {
|
|
20
|
+
/**
|
|
21
|
+
* The left side of the popover will be anchored to the left side of the trigger, allowing the
|
|
22
|
+
* popover to grow on the right side of the trigger.
|
|
23
|
+
*/
|
|
24
|
+
Left = "left",
|
|
25
|
+
/**
|
|
26
|
+
* The Right side of the popover will be anchored to the right side of the trigger, allowing the
|
|
27
|
+
* popover to grow on the left side of the trigger.
|
|
28
|
+
*/
|
|
29
|
+
Right = "right",
|
|
30
|
+
/**
|
|
31
|
+
* Restrict the popover on both sides.
|
|
32
|
+
*
|
|
33
|
+
* This is the default anchor for {@link ViraPopoverTrigger}.
|
|
34
|
+
*/
|
|
35
|
+
Both = "both"
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* An element with slots for a popover trigger and popover contents.
|
|
39
|
+
*
|
|
40
|
+
* @category Popover
|
|
41
|
+
* @category Elements
|
|
42
|
+
* @see https://electrovir.github.io/vira/book/elements/vira-popover-trigger
|
|
43
|
+
*/
|
|
44
|
+
export declare const ViraPopoverTrigger: import("element-vir").DeclarativeElementDefinition<"vira-popover-trigger", PartialWithUndefined<{
|
|
45
|
+
isDisabled: boolean;
|
|
46
|
+
/** For debugging purposes only. Very bad for actual production code use. */
|
|
47
|
+
z_debug_forceOpenState: boolean;
|
|
48
|
+
/** Set to `true` to keep the popover open if it is interacted with. */
|
|
49
|
+
keepOpenAfterInteraction: boolean;
|
|
50
|
+
/** All values in px. */
|
|
51
|
+
popoverOffset?: PopoverOffset;
|
|
52
|
+
}>, {
|
|
53
|
+
/** `undefined` means the popover is not currently showing. */
|
|
54
|
+
showPopoverResult: ShowPopoverResult | undefined;
|
|
55
|
+
popoverManager: PopoverManager;
|
|
56
|
+
}, {
|
|
57
|
+
navSelect: import("element-vir").DefineEvent<Coords>;
|
|
58
|
+
/**
|
|
59
|
+
* - `undefined` indicates that the popover just closed.
|
|
60
|
+
* - {@link ShowPopoverResult} indicates that the popover just opened.
|
|
61
|
+
*/
|
|
62
|
+
openChange: import("element-vir").DefineEvent<ShowPopoverResult | undefined>;
|
|
63
|
+
init: import("element-vir").DefineEvent<{
|
|
64
|
+
navController: NavController;
|
|
65
|
+
popoverManager: PopoverManager;
|
|
66
|
+
}>;
|
|
67
|
+
}, "vira-popover-trigger-disabled", "vira-popover-trigger-", readonly ["trigger", "popover"], readonly []>;
|