@brightspace-ui/core 3.220.2 → 3.220.3
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/view-switcher/README.md +52 -0
- package/components/view-switcher/demo/demo-table-view.js +41 -0
- package/components/view-switcher/demo/view-switcher.html +45 -8
- package/components/view-switcher/view-switcher-button.js +2 -2
- package/components/view-switcher/view-switcher.js +7 -1
- package/custom-elements.json +8 -4
- package/package.json +1 -1
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# View Switcher
|
|
2
|
+
A segmented component to switch between views. Use a view switcher to change between the presentation of a single set of information. It is not recommended to use the switcher to change the information being presented.
|
|
3
|
+
|
|
4
|
+
## View Switcher [d2l-view-switcher]
|
|
5
|
+
|
|
6
|
+
<!-- docs: demo code properties name:d2l-view-switcher sandboxTitle:'View Switcher' autoSize:false -->
|
|
7
|
+
```html
|
|
8
|
+
<script type="module">
|
|
9
|
+
import '@brightspace-ui/core/components/view-switcher/view-switcher.js';
|
|
10
|
+
import '@brightspace-ui/core/components/view-switcher/view-switcher-button.js';
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<d2l-view-switcher label="Layout Options">
|
|
14
|
+
<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
|
|
15
|
+
<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
|
|
16
|
+
<d2l-view-switcher-button key="table" text="Table"></d2l-view-switcher-button>
|
|
17
|
+
</d2l-view-switcher>
|
|
18
|
+
```
|
|
19
|
+
<!-- docs: start hidden content -->
|
|
20
|
+
### Properties
|
|
21
|
+
|
|
22
|
+
| Property | Type | Description |
|
|
23
|
+
|---|---|---|
|
|
24
|
+
| `label` | String, required | Sets an accessible label for the switcher. |
|
|
25
|
+
<!-- docs: end hidden content -->
|
|
26
|
+
|
|
27
|
+
## View Switcher Button [d2l-view-switcher-button]
|
|
28
|
+
|
|
29
|
+
<!-- docs: demo code properties name:d2l-view-switcher-button autoSize:false -->
|
|
30
|
+
```html
|
|
31
|
+
<script type="module">
|
|
32
|
+
import '@brightspace-ui/core/components/view-switcher/view-switcher.js';
|
|
33
|
+
import '@brightspace-ui/core/components/view-switcher/view-switcher-button.js';
|
|
34
|
+
</script>
|
|
35
|
+
|
|
36
|
+
<d2l-view-switcher label="Layout Options">
|
|
37
|
+
<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
|
|
38
|
+
<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
|
|
39
|
+
</d2l-view-switcher>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
<!-- docs: start hidden content -->
|
|
43
|
+
### Properties
|
|
44
|
+
| Property | Type | Description |
|
|
45
|
+
|---|---|---|
|
|
46
|
+
|`key` | String, required | Key for the button. |
|
|
47
|
+
|`text`| String, required | Text for the button. |
|
|
48
|
+
|`selected`| Boolean, default: `false` | Indicates if the item is selected. |
|
|
49
|
+
|
|
50
|
+
### Events
|
|
51
|
+
* `d2l-view-switcher-select`: Dispatched when the item is selected
|
|
52
|
+
<!-- docs: end hidden content -->
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { css, html, LitElement } from 'lit';
|
|
2
|
+
import { tableStyles } from '../../table/table-wrapper.js';
|
|
3
|
+
|
|
4
|
+
class TableView extends LitElement {
|
|
5
|
+
static get styles() {
|
|
6
|
+
return [tableStyles, css`
|
|
7
|
+
:host([hidden]) {
|
|
8
|
+
display: none;
|
|
9
|
+
}
|
|
10
|
+
`];
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
render() {
|
|
14
|
+
return html`
|
|
15
|
+
<d2l-table-wrapper>
|
|
16
|
+
<table class="d2l-table">
|
|
17
|
+
<thead>
|
|
18
|
+
<tr>
|
|
19
|
+
<th>Name</th>
|
|
20
|
+
<th>Section</th>
|
|
21
|
+
<th>Info</th>
|
|
22
|
+
</tr>
|
|
23
|
+
</thead>
|
|
24
|
+
<tbody>
|
|
25
|
+
<tr>
|
|
26
|
+
<th>Jane Doe</th>
|
|
27
|
+
<td>Section 1</td>
|
|
28
|
+
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra felis sit amet magna eleifend lacinia. Duis faucibus commodo tellus.</td>
|
|
29
|
+
</tr>
|
|
30
|
+
<tr>
|
|
31
|
+
<th>John Smith</th>
|
|
32
|
+
<td>Section 2</td>
|
|
33
|
+
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra felis sit amet magna eleifend lacinia. Duis faucibus commodo tellus.</td>
|
|
34
|
+
</tr>
|
|
35
|
+
</tbody>
|
|
36
|
+
</table>
|
|
37
|
+
</d2l-table-wrapper>
|
|
38
|
+
`;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
customElements.define('d2l-demo-table-view', TableView);
|
|
@@ -8,22 +8,59 @@
|
|
|
8
8
|
import '../../demo/demo-page.js';
|
|
9
9
|
import '../view-switcher.js';
|
|
10
10
|
import '../view-switcher-button.js';
|
|
11
|
+
import '../../list/list-item-content.js';
|
|
12
|
+
import '../../list/list-item.js';
|
|
13
|
+
import './demo-table-view.js';
|
|
14
|
+
import { listLayouts } from '../../list/list.js';
|
|
15
|
+
window.listLayouts = listLayouts;
|
|
11
16
|
</script>
|
|
12
17
|
</head>
|
|
13
18
|
<body unresolved>
|
|
14
19
|
|
|
15
20
|
<d2l-demo-page page-title="d2l-view-switcher">
|
|
16
21
|
|
|
17
|
-
<h2>
|
|
22
|
+
<h2>View Switcher</h2>
|
|
18
23
|
|
|
19
24
|
<d2l-demo-snippet>
|
|
20
|
-
<
|
|
21
|
-
<d2l-view-switcher
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
<d2l-view-switcher label="Layout Options">
|
|
26
|
+
<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
|
|
27
|
+
<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
|
|
28
|
+
<d2l-view-switcher-button key="table" text="Table"></d2l-view-switcher-button>
|
|
29
|
+
</d2l-view-switcher>
|
|
30
|
+
<br><br>
|
|
31
|
+
|
|
32
|
+
<d2l-list layout="tiles">
|
|
33
|
+
<d2l-list-item label="item 1">
|
|
34
|
+
<d2l-list-item-content>
|
|
35
|
+
<div>Jane Doe</div>
|
|
36
|
+
<div slot="secondary">Section 1</div>
|
|
37
|
+
<div slot="supporting-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra felis sit amet magna eleifend lacinia. Duis faucibus commodo tellus.</div>
|
|
38
|
+
</d2l-list-item-content>
|
|
39
|
+
</d2l-list-item>
|
|
40
|
+
<d2l-list-item label="item 2">
|
|
41
|
+
<d2l-list-item-content>
|
|
42
|
+
<div>John Smith</div>
|
|
43
|
+
<div slot="secondary">Section 2</div>
|
|
44
|
+
<div slot="supporting-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra felis sit amet magna eleifend lacinia. Duis faucibus commodo tellus.</div>
|
|
45
|
+
</d2l-list-item-content>
|
|
46
|
+
</d2l-list-item>
|
|
47
|
+
</d2l-list>
|
|
48
|
+
<d2l-demo-table-view hidden></d2l-demo-table-view>
|
|
49
|
+
|
|
50
|
+
<script data-demo-hide>
|
|
51
|
+
document.querySelector('d2l-view-switcher').addEventListener('d2l-view-switcher-select', e => {
|
|
52
|
+
const list = document.querySelector('d2l-list');
|
|
53
|
+
const table = document.querySelector('d2l-demo-table-view');
|
|
54
|
+
if (e.detail.key === 'table') {
|
|
55
|
+
table.removeAttribute('hidden');
|
|
56
|
+
list.setAttribute('hidden', '');
|
|
57
|
+
} else {
|
|
58
|
+
table.setAttribute('hidden', '');
|
|
59
|
+
list.removeAttribute('hidden');
|
|
60
|
+
list.layout = (e.detail.key === 'tiles' ? window.listLayouts.tiles : window.listLayouts.list);
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
</script>
|
|
27
64
|
</d2l-demo-snippet>
|
|
28
65
|
|
|
29
66
|
|
|
@@ -15,12 +15,12 @@ class ViewSwitcherButton extends PropertyRequiredMixin(FocusMixin(LitElement)) {
|
|
|
15
15
|
static get properties() {
|
|
16
16
|
return {
|
|
17
17
|
/**
|
|
18
|
-
* REQUIRED: Key
|
|
18
|
+
* REQUIRED: Key for the button
|
|
19
19
|
* @type {string}
|
|
20
20
|
*/
|
|
21
21
|
key: { type: String, required: true },
|
|
22
22
|
/**
|
|
23
|
-
* REQUIRED:
|
|
23
|
+
* REQUIRED: Text for the button
|
|
24
24
|
* @type {string}
|
|
25
25
|
*/
|
|
26
26
|
text: { type: String, required: true },
|
|
@@ -91,7 +91,13 @@ class ViewSwitcher extends LocalizeCoreElement(LitElement) {
|
|
|
91
91
|
const items = this.items;
|
|
92
92
|
this._count = items.length;
|
|
93
93
|
if (items.length === 0) return;
|
|
94
|
-
|
|
94
|
+
const selectedItems = items.filter(i => i.selected);
|
|
95
|
+
if (selectedItems.length === 0) items[0].selected = true;
|
|
96
|
+
if (selectedItems.length > 1) { // unselect all but the first selected item
|
|
97
|
+
for (let i = 1; i < selectedItems.length; i++) {
|
|
98
|
+
selectedItems[i].selected = false;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
95
101
|
}
|
|
96
102
|
|
|
97
103
|
}
|
package/custom-elements.json
CHANGED
|
@@ -15433,6 +15433,10 @@
|
|
|
15433
15433
|
}
|
|
15434
15434
|
]
|
|
15435
15435
|
},
|
|
15436
|
+
{
|
|
15437
|
+
"name": "d2l-demo-table-view",
|
|
15438
|
+
"path": "./components/view-switcher/demo/demo-table-view.js"
|
|
15439
|
+
},
|
|
15436
15440
|
{
|
|
15437
15441
|
"name": "d2l-view-switcher-button",
|
|
15438
15442
|
"path": "./components/view-switcher/view-switcher-button.js",
|
|
@@ -15440,12 +15444,12 @@
|
|
|
15440
15444
|
"attributes": [
|
|
15441
15445
|
{
|
|
15442
15446
|
"name": "key",
|
|
15443
|
-
"description": "REQUIRED: Key
|
|
15447
|
+
"description": "REQUIRED: Key for the button",
|
|
15444
15448
|
"type": "string"
|
|
15445
15449
|
},
|
|
15446
15450
|
{
|
|
15447
15451
|
"name": "text",
|
|
15448
|
-
"description": "REQUIRED:
|
|
15452
|
+
"description": "REQUIRED: Text for the button",
|
|
15449
15453
|
"type": "string"
|
|
15450
15454
|
},
|
|
15451
15455
|
{
|
|
@@ -15459,13 +15463,13 @@
|
|
|
15459
15463
|
{
|
|
15460
15464
|
"name": "key",
|
|
15461
15465
|
"attribute": "key",
|
|
15462
|
-
"description": "REQUIRED: Key
|
|
15466
|
+
"description": "REQUIRED: Key for the button",
|
|
15463
15467
|
"type": "string"
|
|
15464
15468
|
},
|
|
15465
15469
|
{
|
|
15466
15470
|
"name": "text",
|
|
15467
15471
|
"attribute": "text",
|
|
15468
|
-
"description": "REQUIRED:
|
|
15472
|
+
"description": "REQUIRED: Text for the button",
|
|
15469
15473
|
"type": "string"
|
|
15470
15474
|
},
|
|
15471
15475
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.220.
|
|
3
|
+
"version": "3.220.3",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|