Skip to content

Commit 52fe6a1

Browse files
djthorpedjthorpe
committed
Updates
1 parent 48d3ad8 commit 52fe6a1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+138
-38
lines changed

‎src/app/NavDividerElement.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { LitElement, html, css, nothing } from 'lit';
2+
3+
/**
4+
* @class NavDividerElement
5+
*
6+
* This class is used as a visible divider between navigation items
7+
*
8+
* @example
9+
* <wc-nav-group name="group" vertical>
10+
* <wc-nav-item name="item-top">....</wc-nav-item>
11+
* <wc-nav-divider></wc-nav-divider>
12+
* <wc-nav-item name="item-bottom">....</wc-nav-item>
13+
* </wc-nav-group>
14+
*/
15+
export class NavDividerElement extends LitElement {
16+
static get localName() {
17+
return 'wc-nav-divider';
18+
}
19+
20+
render() {
21+
return html`
22+
<hr>
23+
`;
24+
}
25+
26+
// eslint-disable-next-line class-methods-use-this
27+
get classes() {
28+
const classes = [];
29+
classes.push('divider');
30+
return classes;
31+
}
32+
}

‎src/app/NavGroupElement.js‎

Lines changed: 40 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { LitElement, html, css, nothing } from 'lit';
2+
import { Event } from '../core/Event';
23

34
/**
45
* @class NavGroupElement
@@ -7,12 +8,13 @@ import { LitElement, html, css, nothing } from 'lit';
78
*
89
* @property {Boolean} vertical - Fill the canvas vertically rather than horizontally, default false
910
* @property {Boolean} flex - Take up all available space, default false
11+
* @event CLICK - Dispatched when a navigation item is clicked, which is not disabled
1012
*
1113
* @example
12-
* <wc-nav-group name="group" vertical>
13-
* <wc-nav>....</wc-nav>
14+
* <wc-nav-group vertical>
15+
* <wc-nav-item>....</wc-nav-item>
1416
* <wc-nav-spacer></wc-nav-spacer>
15-
* <wc-nav>....</wc-nav>
17+
* <wc-nav-item>....</wc-nav-item>
1618
* </wc-nav-group>
1719
*/
1820
export class NavGroupElement extends LitElement {
@@ -60,32 +62,63 @@ export class NavGroupElement extends LitElement {
6062
::slotted(wc-nav-spacer) {
6163
flex: 999;
6264
}
63-
::slotted(wc-nav-item:hover) {
65+
::slotted(wc-nav-item:not([disabled]):hover) {
6466
font-weight: var(--nav-item-hover-font-weight);
6567
}
6668
::slotted(wc-nav-item[selected]) {
6769
color: var(--nav-item-selected-color);
6870
background-color: var(--nav-item-selected-background-color,red);
6971
}
72+
::slotted(wc-nav-item[disabled]) {
73+
color: var(--nav-item-disabled-color);
74+
cursor: default;
75+
}
7076
`;
7177
}
7278

7379
render() {
7480
return html`
75-
<ul class=${this.className || nothing}>
81+
<ul class=${this.classes.join(' ') || nothing} @click=${this.onClick}>
7682
<slot></slot>
7783
</ul>
7884
`;
7985
}
8086

81-
get className() {
87+
get classes() {
8288
const classes = [];
8389
if (this.vertical) {
8490
classes.push('vertical');
8591
}
8692
if (this.flex) {
8793
classes.push('flex');
8894
}
89-
return classes.join(' ');
95+
return classes;
96+
}
97+
98+
/**
99+
* Select the named item from the list of wv-nav-item elements
100+
*
101+
* @param {String} name - Name of the item to select
102+
*/
103+
select(name) {
104+
this.querySelectorAll('wc-nav-item').forEach((item) => {
105+
if (item.name === name) {
106+
item.setAttribute('selected', true);
107+
} else {
108+
item.removeAttribute('selected');
109+
}
110+
});
111+
}
112+
113+
// eslint-disable-next-line class-methods-use-this
114+
onClick(event) {
115+
const target = event.target.closest('wc-nav-item');
116+
if (target && !target.disabled) {
117+
this.dispatchEvent(new CustomEvent(Event.CLICK, {
118+
bubbles: true,
119+
composed: true,
120+
detail: target.name || target.textContent.trim(),
121+
}));
122+
}
90123
}
91124
}

‎src/app/NavItemElement.js‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
import { LitElement, html, css, nothing } from 'lit';
1+
import { LitElement, html, nothing } from 'lit';
22

33
/**
44
* @class NavItemElement
55
*
66
* This class is used as a navigation item within a group of navigational items
77
*
8+
* @property {String} name - The name of the navigational item
9+
* @property {Boolean} selected - Whether the item is selected
10+
* @property {Boolean} disabled - Whether the item is disabled
11+
*
812
* @example
913
* <wc-nav-group name="group" vertical>
1014
* <wc-nav-item name="item-top">....</wc-nav-item>
@@ -17,6 +21,23 @@ export class NavItemElement extends LitElement {
1721
return 'wc-nav-item';
1822
}
1923

24+
constructor() {
25+
super();
26+
27+
// Default properties
28+
this.name = '';
29+
this.selected = false;
30+
this.disabled = false;
31+
}
32+
33+
static get properties() {
34+
return {
35+
name: { type: String },
36+
selected: { type: Boolean },
37+
disabled: { type: Boolean },
38+
};
39+
}
40+
2041
render() {
2142
return html`
2243
<li class=${this.classes.join(' ') || nothing}>
@@ -25,9 +46,14 @@ export class NavItemElement extends LitElement {
2546
`;
2647
}
2748

28-
// eslint-disable-next-line class-methods-use-this
2949
get classes() {
3050
const classes = [];
51+
if (this.selected) {
52+
classes.push('selected');
53+
}
54+
if (this.disabled) {
55+
classes.push('disabled');
56+
}
3157
return classes;
3258
}
3359
}

‎src/app/app.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
--nav-item-padding-y: 0.5em;
55
--nav-item-hover-font-weight: var(--font-weight-semibold);
66
--nav-item-selected-color: var(--light-color);
7+
--nav-item-disabled-color: var(--grey-40-color);
78
--nav-item-selected-background-color: var(--primary-color);
89

910
/* icon */

‎src/app/app.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { CanvasNavbarElement } from './CanvasNavbarElement';
88
import { NavGroupElement } from './NavGroupElement';
99
import { NavItemElement } from './NavItemElement';
1010
import { NavSpacerElement } from './NavSpacerElement';
11+
import { NavDividerElement } from './NavDividerElement';
1112
import { IconElement } from './IconElement';
1213

1314
// Web Components
@@ -17,4 +18,5 @@ customElements.define(CanvasNavbarElement.localName, CanvasNavbarElement); // wc
1718
customElements.define(NavGroupElement.localName, NavGroupElement); // wc-nav-group
1819
customElements.define(NavItemElement.localName, NavItemElement); // wc-nav-item
1920
customElements.define(NavSpacerElement.localName, NavSpacerElement); // wc-nav-spacer
21+
customElements.define(NavDividerElement.localName, NavDividerElement); // wc-nav-divider
2022
customElements.define(IconElement.localName, IconElement); // wc-icon

‎src/core/Event.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1-
// Define events used by web components
1+
/**
2+
* Define events used by web components
3+
* @readonly
4+
* @enum {String}
5+
*/
26
export const Event = {
3-
CHANGE: 'change',
7+
CHANGE: 'wc-change',
8+
CLICK: 'wc-click',
49
EVENT_CLICK: 'ws-click',
510
EVENT_HOVER: 'ws-hover',
611
EVENT_START: 'ws-start',

‎src/form/FormControlElement.js‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ import { Event } from '../core/Event';
66
*
77
* This class is used as a base class for all form elements
88
*
9+
* @property {String} name - The name of the switch
10+
* @property {String} value - The value of the control
11+
* @property {Boolean} disabled - Whether the form control is disabled
12+
* @property {Boolean} required - Whether the form control is required before submitting
13+
*
914
* @example
1015
* <wc-form-control>Power</wc-form-switch>
1116
*/
@@ -31,24 +36,9 @@ export class FormControlElement extends LitElement {
3136

3237
static get properties() {
3338
return {
34-
/**
35-
* @property {String} name - The name of the switch
36-
*/
3739
name: { type: String },
38-
39-
/**
40-
* @property {String} value - The value of the control
41-
*/
4240
value: { type: String },
43-
44-
/**
45-
* @property {Boolean} disabled - Whether the form control is disabled
46-
*/
4741
disabled: { type: Boolean },
48-
49-
/**
50-
* @property {Boolean} required - Whether the form control is required before submitting
51-
*/
5242
required: { type: Boolean },
5343
};
5444
}

‎src/form/FormSwitchElement.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { FormControlElement } from './FormControlElement';
66
*
77
* This class is used to create a binary switch
88
*
9+
* @property {Boolean} selected - Whether the switch is checked
10+
*
911
* @example
1012
* <wc-form-switch name="power" selected>Power</wc-form-switch>
1113
*/
@@ -23,9 +25,6 @@ export class FormSwitchElement extends FormControlElement {
2325

2426
static get properties() {
2527
return {
26-
/**
27-
* @property {Boolean} selected - Whether the switch is checked
28-
*/
2928
selected: { type: Boolean },
3029
};
3130
}

‎src/index.html‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,27 @@
1313
<wc-canvas vertical backgroundColor="light">
1414
<wc-canvas-navbar>
1515
<wc-nav-group>
16-
<wc-nav-item selected>
16+
<wc-nav-item name="home" selected>
1717
<nobr><wc-icon name="house"></wc-icon> Home</nobr>
1818
</wc-nav-item>
19-
<wc-nav-item>
19+
<wc-nav-item name="dashboard">
2020
<nobr><wc-icon name="speedometer" size="medium"></wc-icon> Dashboard</nobr>
2121
</wc-nav-item>
22-
<wc-nav-item>
22+
<wc-nav-item name="orders">
2323
<nobr><wc-icon name="table" size="medium"></wc-icon> Orders</nobr>
2424
</wc-nav-item>
25-
<wc-nav-item>
25+
<wc-nav-item name="products">
2626
<nobr><wc-icon name="grid" size="medium"></wc-icon> Products</nobr>
2727
</wc-nav-item>
28-
<wc-nav-item>
28+
<wc-nav-item name="customers">
2929
<nobr><wc-icon name="person-circle" size="medium"></wc-icon> Customers</nobr>
3030
</wc-nav-item>
31-
<wc-nav-item>
31+
<wc-nav-item name="help" disabled>
3232
<nobr><wc-icon name="question-circle" size="medium"></wc-icon> Help</nobr>
3333
</wc-nav-item>
34+
<wc-nav-divider></wc-nav-divider>
3435
<wc-nav-spacer></wc-nav-spacer>
36+
<wc-nav-divider></wc-nav-divider>
3537
<wc-nav-item>
3638
<wc-form-switch name="theme">Dark Theme</wc-form-switch>
3739
</wc-nav-item>
@@ -43,10 +45,10 @@
4345
</wc-nav-item>
4446
</wc-nav-group>
4547
<script>
46-
document.querySelector('wc-form-switch').addEventListener('change', (e) => {
48+
document.querySelector('wc-form-switch').addEventListener('wc-change', (e) => {
4749
document.querySelector('wc-canvas').setAttribute('backgroundColor', e.target.selected ? 'dark' : 'light');
4850
});
49-
document.querySelector('wc-form-switch#vertical').addEventListener('change', (e) => {
51+
document.querySelector('wc-form-switch#vertical').addEventListener('wc-change', (e) => {
5052
if (e.target.selected) {
5153
document.querySelector('wc-canvas').removeAttribute('vertical');
5254
document.querySelector('wc-nav-group').setAttribute('vertical', true);
@@ -55,13 +57,23 @@
5557
document.querySelector('wc-nav-group').removeAttribute('vertical');
5658
}
5759
});
58-
document.querySelector('wc-form-switch#end').addEventListener('change', (e) => {
60+
document.querySelector('wc-form-switch#end').addEventListener('wc-change', (e) => {
5961
if (e.target.selected) {
6062
document.querySelector('wc-canvas-navbar#end').setAttribute('hidden', true);
6163
} else {
6264
document.querySelector('wc-canvas-navbar#end').removeAttribute('hidden');
6365
}
6466
});
67+
document.querySelector('wc-nav-group').addEventListener('wc-click', (e) => {
68+
switch (e.detail) {
69+
case 'home':
70+
case 'dashboard':
71+
case 'orders':
72+
case 'products':
73+
case 'customers':
74+
e.target.select(e.detail);
75+
}
76+
});
6577
</script>
6678
</wc-canvas-navbar>
6779
<wc-canvas-section flex>

‎src/badge/BadgeElement.js‎ renamed to ‎src/old/badge/BadgeElement.js‎

File renamed without changes.

0 commit comments

Comments
 (0)