@aurodesignsystem-dev/auro-formkit 0.0.0-pr754.1 → 0.0.0-pr755.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/components/checkbox/demo/api.html +16 -10
- package/components/checkbox/demo/api.min.js +2 -2
- package/components/checkbox/demo/index.html +16 -10
- package/components/checkbox/demo/index.min.js +2 -2
- package/components/checkbox/demo/readme.html +16 -9
- package/components/checkbox/dist/index.js +2 -2
- package/components/checkbox/dist/registered.js +2 -2
- package/components/combobox/demo/api.html +16 -10
- package/components/combobox/demo/api.min.js +11 -35
- package/components/combobox/demo/index.html +16 -10
- package/components/combobox/demo/index.min.js +11 -35
- package/components/combobox/demo/readme.html +16 -9
- package/components/counter/demo/api.html +16 -10
- package/components/counter/demo/index.html +16 -10
- package/components/counter/demo/readme.html +16 -9
- package/components/datepicker/demo/api.html +16 -10
- package/components/datepicker/demo/index.html +16 -10
- package/components/datepicker/demo/readme.html +16 -9
- package/components/dropdown/demo/api.html +16 -10
- package/components/dropdown/demo/index.html +16 -10
- package/components/dropdown/demo/readme.html +16 -9
- package/components/form/demo/api.html +16 -9
- package/components/form/demo/autocomplete.html +19 -3
- package/components/form/demo/index.html +16 -9
- package/components/form/demo/readme.html +16 -9
- package/components/form/demo/working.html +19 -13
- package/components/input/demo/api.html +16 -10
- package/components/input/demo/index.html +16 -10
- package/components/input/demo/readme.html +16 -9
- package/components/menu/demo/api.html +16 -32
- package/components/menu/demo/api.md +14 -15
- package/components/menu/demo/api.min.js +11 -35
- package/components/menu/demo/index.html +16 -10
- package/components/menu/demo/index.min.js +11 -35
- package/components/menu/demo/readme.html +16 -9
- package/components/menu/dist/auro-menu.d.ts +2 -12
- package/components/menu/dist/index.js +11 -35
- package/components/menu/dist/registered.js +11 -35
- package/components/radio/demo/api.html +16 -10
- package/components/radio/demo/index.html +16 -10
- package/components/radio/demo/readme.html +16 -9
- package/components/select/demo/api.html +16 -10
- package/components/select/demo/api.md +29 -30
- package/components/select/demo/api.min.js +91 -64
- package/components/select/demo/index.html +16 -11
- package/components/select/demo/index.min.js +91 -64
- package/components/select/demo/readme.html +16 -9
- package/components/select/dist/auro-select.d.ts +3 -12
- package/components/select/dist/index.js +80 -29
- package/components/select/dist/registered.js +80 -29
- package/package.json +4 -4
|
@@ -14,19 +14,25 @@
|
|
|
14
14
|
<!DOCTYPE html>
|
|
15
15
|
<html lang="en">
|
|
16
16
|
<head>
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
type="text/css"
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
17
|
+
<meta charset="UTF-8" />
|
|
18
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
+
<title>Auro Web Component Demo | auro-form</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-form's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
34
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
30
36
|
</head>
|
|
31
37
|
<body class="auro-markdown">
|
|
32
38
|
<main>
|
|
@@ -3,18 +3,24 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<title>Auro Web Component
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css"
|
|
13
|
-
|
|
6
|
+
<title>Auro Web Component Demo | auro-input</title>
|
|
7
|
+
|
|
8
|
+
<!-- Prism.js Stylesheet -->
|
|
9
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
10
|
+
|
|
11
|
+
<!-- Legacy reference is still needed to support auro-input's use of legacy token values at this time -->
|
|
12
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
13
|
+
|
|
14
|
+
<!-- Design Token Alaska Theme -->
|
|
15
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
16
|
+
|
|
17
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
18
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
19
|
+
|
|
20
|
+
<!-- Demo Specific Styles -->
|
|
14
21
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
15
22
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
16
|
-
|
|
17
|
-
</head>
|
|
23
|
+
</head>
|
|
18
24
|
<body class="auro-markdown">
|
|
19
25
|
<main></main>
|
|
20
26
|
|
|
@@ -3,18 +3,24 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<title>Auro Web Component
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css"
|
|
13
|
-
|
|
6
|
+
<title>Auro Web Component Demo | auro-input</title>
|
|
7
|
+
|
|
8
|
+
<!-- Prism.js Stylesheet -->
|
|
9
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
10
|
+
|
|
11
|
+
<!-- Legacy reference is still needed to support auro-input's use of legacy token values at this time -->
|
|
12
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
13
|
+
|
|
14
|
+
<!-- Design Token Alaska Theme -->
|
|
15
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
16
|
+
|
|
17
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
18
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
19
|
+
|
|
20
|
+
<!-- Demo Specific Styles -->
|
|
14
21
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
15
22
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
16
|
-
|
|
17
|
-
</head>
|
|
23
|
+
</head>
|
|
18
24
|
<body class="auro-markdown">
|
|
19
25
|
<main></main>
|
|
20
26
|
|
|
@@ -16,17 +16,24 @@
|
|
|
16
16
|
<head>
|
|
17
17
|
<meta charset="UTF-8" />
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
-
<title>Auro Web Component
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css"
|
|
26
|
-
|
|
19
|
+
<title>Auro Web Component Demo | auro-input</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-input's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
27
34
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
28
35
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
29
|
-
|
|
36
|
+
</head>
|
|
30
37
|
<body class="auro-markdown">
|
|
31
38
|
<main></main>
|
|
32
39
|
|
|
@@ -16,40 +16,24 @@
|
|
|
16
16
|
<head>
|
|
17
17
|
<meta charset="UTF-8" />
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
-
<title>Auro Web Component
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css"
|
|
26
|
-
|
|
19
|
+
<title>Auro Web Component Demo | auro-menu</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-menu's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
27
34
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
28
35
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
29
|
-
|
|
30
|
-
<style>
|
|
31
|
-
header {
|
|
32
|
-
background: lightgray;
|
|
33
|
-
position: fixed;
|
|
34
|
-
bottom: 0;
|
|
35
|
-
right: 0;
|
|
36
|
-
z-index: 10;
|
|
37
|
-
}
|
|
38
|
-
</style>
|
|
39
|
-
<script>
|
|
40
|
-
function onRadioInput(event) {
|
|
41
|
-
if (event.constructor.name === 'CustomEvent') {
|
|
42
|
-
const group = event.target.getAttribute('name');
|
|
43
|
-
const menus = document.querySelectorAll('auro-menu');
|
|
44
|
-
if (menus) {
|
|
45
|
-
menus.forEach((menu) => {
|
|
46
|
-
menu.setAttribute(group, event.target.value);
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
}
|
|
51
|
-
</script>
|
|
52
|
-
</head>
|
|
36
|
+
</head>
|
|
53
37
|
<body class="auro-markdown">
|
|
54
38
|
<header oninput="onRadioInput(event)">
|
|
55
39
|
<auro-radio-group required horizontal name="shape">
|
|
@@ -7,21 +7,20 @@ The auro-menu element provides users a way to select from a list of options.
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute |
|
|
11
|
-
|
|
12
|
-
| [disabled](#disabled) | `disabled` |
|
|
13
|
-
| [
|
|
14
|
-
| [
|
|
15
|
-
| [
|
|
16
|
-
| [
|
|
17
|
-
| [
|
|
18
|
-
| [
|
|
19
|
-
| [
|
|
20
|
-
| [
|
|
21
|
-
| [
|
|
22
|
-
| [
|
|
23
|
-
| [
|
|
24
|
-
| [value](#value) | `value` | | `string` | "undefined" | Value selected for the component. |
|
|
10
|
+
| Property | Attribute | Type | Default | Description |
|
|
11
|
+
|-------------------------|------------------|-----------------------------------|-------------|--------------------------------------------------|
|
|
12
|
+
| [disabled](#disabled) | `disabled` | `boolean` | | When true, the entire menu and all options are disabled; |
|
|
13
|
+
| [hasLoadingPlaceholder](#hasLoadingPlaceholder) | | `boolean` | | Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state. |
|
|
14
|
+
| [layout](#layout) | | `string` | | |
|
|
15
|
+
| [loading](#loading) | `loading` | `boolean` | false | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
|
|
16
|
+
| [matchWord](#matchWord) | `matchword` | `string` | "undefined" | Specifies a string used to highlight matched string parts in options. |
|
|
17
|
+
| [multiSelect](#multiSelect) | `multiselect` | `boolean` | false | When true, the selected option can be multiple options. |
|
|
18
|
+
| [noCheckmark](#noCheckmark) | `nocheckmark` | `boolean` | false | When true, selected option will not show the checkmark. |
|
|
19
|
+
| [optionActive](#optionActive) | `optionactive` | `object` | "undefined" | Specifies the current active menuOption. |
|
|
20
|
+
| [optionSelected](#optionSelected) | `optionSelected` | `HTMLElement\|Array<HTMLElement>` | "undefined" | An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements. |
|
|
21
|
+
| [shape](#shape) | | `string` | "" | |
|
|
22
|
+
| [size](#size) | | `string` | "" | |
|
|
23
|
+
| [value](#value) | `value` | `String\|Array<string>` | "undefined" | Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings. |
|
|
25
24
|
|
|
26
25
|
## Methods
|
|
27
26
|
|
|
@@ -286,6 +286,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
|
|
|
286
286
|
* @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
|
|
287
287
|
* @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
|
|
288
288
|
* @attr {boolean} multiselect - When true, the selected option can be multiple options.
|
|
289
|
+
* @attr {String|Array<string>} value - Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings.
|
|
289
290
|
* @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
|
|
290
291
|
* @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
|
|
291
292
|
* @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
|
|
@@ -398,14 +399,9 @@ class AuroMenu extends AuroElement$1 {
|
|
|
398
399
|
reflect: true,
|
|
399
400
|
attribute: 'multiselect'
|
|
400
401
|
},
|
|
401
|
-
|
|
402
|
-
/**
|
|
403
|
-
* Value selected for the component.
|
|
404
|
-
*/
|
|
405
402
|
value: {
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
attribute: 'value'
|
|
403
|
+
// Allow string, string[] arrays and undefined
|
|
404
|
+
type: Object
|
|
409
405
|
},
|
|
410
406
|
|
|
411
407
|
/**
|
|
@@ -440,24 +436,6 @@ class AuroMenu extends AuroElement$1 {
|
|
|
440
436
|
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroMenu);
|
|
441
437
|
}
|
|
442
438
|
|
|
443
|
-
/**
|
|
444
|
-
* Formatted value based on `multiSelect` state.
|
|
445
|
-
* Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
|
|
446
|
-
* @returns {String|Array<String>}
|
|
447
|
-
*/
|
|
448
|
-
get formattedValue() {
|
|
449
|
-
if (this.multiSelect) {
|
|
450
|
-
if (!this.value) {
|
|
451
|
-
return undefined;
|
|
452
|
-
}
|
|
453
|
-
if (this.value.startsWith("[")) {
|
|
454
|
-
return JSON.parse(this.value);
|
|
455
|
-
}
|
|
456
|
-
return [this.value];
|
|
457
|
-
}
|
|
458
|
-
return this.value;
|
|
459
|
-
}
|
|
460
|
-
|
|
461
439
|
// Lifecycle Methods
|
|
462
440
|
|
|
463
441
|
connectedCallback() {
|
|
@@ -500,7 +478,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
500
478
|
updated(changedProperties) {
|
|
501
479
|
super.updated(changedProperties);
|
|
502
480
|
|
|
503
|
-
if (changedProperties.has('multiSelect')
|
|
481
|
+
if (changedProperties.has('multiSelect')) {
|
|
504
482
|
// Reset selection if multiSelect mode changes
|
|
505
483
|
this.clearSelection();
|
|
506
484
|
}
|
|
@@ -514,7 +492,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
514
492
|
} else {
|
|
515
493
|
if (this.multiSelect) {
|
|
516
494
|
// In multiselect mode, this.value should be an array of strings
|
|
517
|
-
const valueArray = this.
|
|
495
|
+
const valueArray = Array.isArray(this.value) ? this.value : [this.value];
|
|
518
496
|
const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
|
|
519
497
|
|
|
520
498
|
this.optionSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
|
|
@@ -681,14 +659,14 @@ class AuroMenu extends AuroElement$1 {
|
|
|
681
659
|
*/
|
|
682
660
|
handleSelectState(option) {
|
|
683
661
|
if (this.multiSelect) {
|
|
684
|
-
const currentValue = this.
|
|
662
|
+
const currentValue = this.value || [];
|
|
685
663
|
const currentSelected = this.optionSelected || [];
|
|
686
664
|
|
|
687
665
|
if (!currentValue.includes(option.value)) {
|
|
688
|
-
this.value =
|
|
666
|
+
this.value = [
|
|
689
667
|
...currentValue,
|
|
690
668
|
option.value
|
|
691
|
-
]
|
|
669
|
+
];
|
|
692
670
|
}
|
|
693
671
|
if (!currentSelected.includes(option)) {
|
|
694
672
|
this.optionSelected = [
|
|
@@ -711,15 +689,13 @@ class AuroMenu extends AuroElement$1 {
|
|
|
711
689
|
* @param {HTMLElement} option - The menuoption to be deselected.
|
|
712
690
|
*/
|
|
713
691
|
handleDeselectState(option) {
|
|
714
|
-
if (this.multiSelect) {
|
|
692
|
+
if (this.multiSelect && Array.isArray(this.value)) {
|
|
715
693
|
// Remove this option from array
|
|
716
|
-
|
|
694
|
+
this.value = this.value.filter((val) => val !== option.value);
|
|
717
695
|
|
|
718
696
|
// If array is empty after removal, set back to undefined
|
|
719
|
-
if (
|
|
697
|
+
if (this.value.length === 0) {
|
|
720
698
|
this.value = undefined;
|
|
721
|
-
} else {
|
|
722
|
-
this.value = JSON.stringify(newFormattedValue);
|
|
723
699
|
}
|
|
724
700
|
|
|
725
701
|
this.optionSelected = this.optionSelected.filter((val) => val !== option);
|
|
@@ -16,18 +16,24 @@
|
|
|
16
16
|
<head>
|
|
17
17
|
<meta charset="UTF-8" />
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
-
<title>Auro Web Component
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css"
|
|
26
|
-
|
|
19
|
+
<title>Auro Web Component Demo | auro-menu</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-menu's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
27
34
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
28
35
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
29
|
-
|
|
30
|
-
</head>
|
|
36
|
+
</head>
|
|
31
37
|
<body class="auro-markdown">
|
|
32
38
|
<main></main>
|
|
33
39
|
|
|
@@ -246,6 +246,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
|
|
|
246
246
|
* @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
|
|
247
247
|
* @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
|
|
248
248
|
* @attr {boolean} multiselect - When true, the selected option can be multiple options.
|
|
249
|
+
* @attr {String|Array<string>} value - Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings.
|
|
249
250
|
* @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
|
|
250
251
|
* @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
|
|
251
252
|
* @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
|
|
@@ -358,14 +359,9 @@ class AuroMenu extends AuroElement$1 {
|
|
|
358
359
|
reflect: true,
|
|
359
360
|
attribute: 'multiselect'
|
|
360
361
|
},
|
|
361
|
-
|
|
362
|
-
/**
|
|
363
|
-
* Value selected for the component.
|
|
364
|
-
*/
|
|
365
362
|
value: {
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
attribute: 'value'
|
|
363
|
+
// Allow string, string[] arrays and undefined
|
|
364
|
+
type: Object
|
|
369
365
|
},
|
|
370
366
|
|
|
371
367
|
/**
|
|
@@ -400,24 +396,6 @@ class AuroMenu extends AuroElement$1 {
|
|
|
400
396
|
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroMenu);
|
|
401
397
|
}
|
|
402
398
|
|
|
403
|
-
/**
|
|
404
|
-
* Formatted value based on `multiSelect` state.
|
|
405
|
-
* Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
|
|
406
|
-
* @returns {String|Array<String>}
|
|
407
|
-
*/
|
|
408
|
-
get formattedValue() {
|
|
409
|
-
if (this.multiSelect) {
|
|
410
|
-
if (!this.value) {
|
|
411
|
-
return undefined;
|
|
412
|
-
}
|
|
413
|
-
if (this.value.startsWith("[")) {
|
|
414
|
-
return JSON.parse(this.value);
|
|
415
|
-
}
|
|
416
|
-
return [this.value];
|
|
417
|
-
}
|
|
418
|
-
return this.value;
|
|
419
|
-
}
|
|
420
|
-
|
|
421
399
|
// Lifecycle Methods
|
|
422
400
|
|
|
423
401
|
connectedCallback() {
|
|
@@ -460,7 +438,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
460
438
|
updated(changedProperties) {
|
|
461
439
|
super.updated(changedProperties);
|
|
462
440
|
|
|
463
|
-
if (changedProperties.has('multiSelect')
|
|
441
|
+
if (changedProperties.has('multiSelect')) {
|
|
464
442
|
// Reset selection if multiSelect mode changes
|
|
465
443
|
this.clearSelection();
|
|
466
444
|
}
|
|
@@ -474,7 +452,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
474
452
|
} else {
|
|
475
453
|
if (this.multiSelect) {
|
|
476
454
|
// In multiselect mode, this.value should be an array of strings
|
|
477
|
-
const valueArray = this.
|
|
455
|
+
const valueArray = Array.isArray(this.value) ? this.value : [this.value];
|
|
478
456
|
const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
|
|
479
457
|
|
|
480
458
|
this.optionSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
|
|
@@ -641,14 +619,14 @@ class AuroMenu extends AuroElement$1 {
|
|
|
641
619
|
*/
|
|
642
620
|
handleSelectState(option) {
|
|
643
621
|
if (this.multiSelect) {
|
|
644
|
-
const currentValue = this.
|
|
622
|
+
const currentValue = this.value || [];
|
|
645
623
|
const currentSelected = this.optionSelected || [];
|
|
646
624
|
|
|
647
625
|
if (!currentValue.includes(option.value)) {
|
|
648
|
-
this.value =
|
|
626
|
+
this.value = [
|
|
649
627
|
...currentValue,
|
|
650
628
|
option.value
|
|
651
|
-
]
|
|
629
|
+
];
|
|
652
630
|
}
|
|
653
631
|
if (!currentSelected.includes(option)) {
|
|
654
632
|
this.optionSelected = [
|
|
@@ -671,15 +649,13 @@ class AuroMenu extends AuroElement$1 {
|
|
|
671
649
|
* @param {HTMLElement} option - The menuoption to be deselected.
|
|
672
650
|
*/
|
|
673
651
|
handleDeselectState(option) {
|
|
674
|
-
if (this.multiSelect) {
|
|
652
|
+
if (this.multiSelect && Array.isArray(this.value)) {
|
|
675
653
|
// Remove this option from array
|
|
676
|
-
|
|
654
|
+
this.value = this.value.filter((val) => val !== option.value);
|
|
677
655
|
|
|
678
656
|
// If array is empty after removal, set back to undefined
|
|
679
|
-
if (
|
|
657
|
+
if (this.value.length === 0) {
|
|
680
658
|
this.value = undefined;
|
|
681
|
-
} else {
|
|
682
|
-
this.value = JSON.stringify(newFormattedValue);
|
|
683
659
|
}
|
|
684
660
|
|
|
685
661
|
this.optionSelected = this.optionSelected.filter((val) => val !== option);
|
|
@@ -16,17 +16,24 @@
|
|
|
16
16
|
<head>
|
|
17
17
|
<meta charset="UTF-8" />
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
-
<title>Auro Web Component
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css"
|
|
26
|
-
|
|
19
|
+
<title>Auro Web Component Demo | auro-menu</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-menu's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
27
34
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
28
35
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
29
|
-
|
|
36
|
+
</head>
|
|
30
37
|
<body class="auro-markdown">
|
|
31
38
|
<main></main>
|
|
32
39
|
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
* @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
|
|
8
8
|
* @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
|
|
9
9
|
* @attr {boolean} multiselect - When true, the selected option can be multiple options.
|
|
10
|
+
* @attr {String|Array<string>} value - Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings.
|
|
10
11
|
* @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
|
|
11
12
|
* @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
|
|
12
13
|
* @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
|
|
@@ -49,13 +50,8 @@ export class AuroMenu extends AuroElement {
|
|
|
49
50
|
reflect: boolean;
|
|
50
51
|
attribute: string;
|
|
51
52
|
};
|
|
52
|
-
/**
|
|
53
|
-
* Value selected for the component.
|
|
54
|
-
*/
|
|
55
53
|
value: {
|
|
56
|
-
type:
|
|
57
|
-
reflect: boolean;
|
|
58
|
-
attribute: string;
|
|
54
|
+
type: ObjectConstructor;
|
|
59
55
|
};
|
|
60
56
|
/**
|
|
61
57
|
* Indent level for submenus.
|
|
@@ -114,12 +110,6 @@ export class AuroMenu extends AuroElement {
|
|
|
114
110
|
* @private
|
|
115
111
|
*/
|
|
116
112
|
private handleSlotChange;
|
|
117
|
-
/**
|
|
118
|
-
* Formatted value based on `multiSelect` state.
|
|
119
|
-
* Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
|
|
120
|
-
* @returns {String|Array<String>}
|
|
121
|
-
*/
|
|
122
|
-
get formattedValue(): string | Array<string>;
|
|
123
113
|
firstUpdated(): void;
|
|
124
114
|
loadingSlots: NodeListOf<Element>;
|
|
125
115
|
/**
|