Skip to content

Commit e76d140

Browse files
djthorpedjthorpe
committed
Updated
1 parent 821a339 commit e76d140

10 files changed

+43
-19
lines changed

‎src/app/CardElement.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { LitElement, html, css, nothing } from 'lit';
77
*
88
* @property {String} backgroundColor - The color theme of the card, default light
99
* @property {Number} width - The width of the card in 1/12th of the available space
10+
* @property {Boolean} hidden - Whether the card is hidden, default false
1011
*
1112
* @example
1213
* <wc-card-group>
@@ -26,20 +27,17 @@ export class CardElement extends LitElement {
2627
// Default properties
2728
this.backgroundColor = 'light';
2829
this.width = 0;
30+
this.hidden = false;
2931
}
3032

3133
static get properties() {
3234
return {
3335
backgroundColor: { type: String, attribute: true },
3436
width: { type: Number, attribute: true },
37+
hidden: { type: Boolean, attribute: true },
3538
};
3639
}
3740

38-
static get styles() {
39-
return css`
40-
`;
41-
}
42-
4341
render() {
4442
this.style.maxWidth = `${this.flexBasis}`;
4543
this.style.flexBasis = `${this.flexBasis}`;

‎src/app/CardGroupElement.js

+5
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@ export class CardGroupElement extends LitElement {
2727
flex-wrap: wrap;
2828
}
2929
30+
/* Hidden Cards */
31+
::slotted(wc-card[hidden]) {
32+
display: none;
33+
}
34+
3035
/* Colours */
3136
::slotted(wc-card) {
3237
position: relative;

‎src/app/NavGroupElement.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { LitElement, html, css, nothing } from 'lit';
2-
import { Event } from '../core/Event';
2+
import { EventType } from '../core/Event';
33

44
/**
55
* @class NavGroupElement
@@ -119,7 +119,7 @@ export class NavGroupElement extends LitElement {
119119
onClick(event) {
120120
const target = event.target.closest('wc-nav-item');
121121
if (target && !target.disabled) {
122-
this.dispatchEvent(new CustomEvent(Event.CLICK, {
122+
this.dispatchEvent(new CustomEvent(EventType.CLICK, {
123123
bubbles: true,
124124
composed: true,
125125
detail: target.name || target.textContent.trim(),

‎src/app/app.css

+1
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,5 @@
2424
--card-padding-x: 0.4em;
2525
--card-padding-y: 0.4em;
2626
--card-border-radius: var(--border-radius);
27+
--card-transition-delay: 300ms;
2728
}

‎src/button/ButtonElement.js

+15-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { LitElement, html, css, nothing } from 'lit';
2+
import { EventType } from '../core/Event';
23

34
/**
45
* @class ButtonElement
@@ -104,23 +105,23 @@ export class ButtonElement extends LitElement {
104105

105106
renderButton() {
106107
return html`
107-
<button class=${this.classes.join(' ') || nothing} ?disabled=${this.disabled} name=${this.name || nothing} value=${this.buttonTitle || nothing}>
108+
<button class=${this.classes.join(' ') || nothing} ?disabled=${this.disabled} name=${this.name || nothing} value=${this.buttonTitle || nothing} @click=${this.onClick}>
108109
<slot></slot>
109110
</button>
110111
`;
111112
}
112113

113114
renderSubmit() {
114115
return html`
115-
<button class=${this.classes.join(' ') || nothing} type="submit" ?disabled=${this.disabled} name=${this.name || nothing} value=${this.buttonTitle || nothing}><slot></slot></button>
116+
<button class=${this.classes.join(' ') || nothing} type="submit" ?disabled=${this.disabled} name=${this.name || nothing} value=${this.buttonTitle || nothing} @click=${this.onClick}><slot></slot></button>
116117
`;
117118
}
118119

119120
renderControl() {
120121
const icon = this.controlButtonIcon;
121122
if (icon) {
122123
return html`
123-
<button class=${this.classes.join(' ') || nothing} ?disabled=${this.disabled} name=${this.name || nothing} value=${this.buttonTitle || nothing}>
124+
<button class=${this.classes.join(' ') || nothing} ?disabled=${this.disabled} name=${this.name || nothing} value=${this.buttonTitle || nothing} @click=${this.onClick}>
124125
<wc-icon name=${icon}></wc-icon>
125126
</button>
126127
`;
@@ -138,4 +139,15 @@ export class ButtonElement extends LitElement {
138139
return this.renderButton();
139140
}
140141
}
142+
143+
// Change the selected state when the input is changed
144+
onClick() {
145+
if (!this.disabled) {
146+
this.dispatchEvent(new CustomEvent(EventType.CLICK, {
147+
bubbles: true,
148+
composed: true,
149+
detail: this.name || this.buttonTitle,
150+
}));
151+
}
152+
}
141153
}

‎src/button/button.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,6 @@
3434
--button-control-color-disabled: var(--control-color-disabled);
3535

3636
/* control button group */
37-
--control-button-group-margin-y: 0.3em;
37+
--control-button-group-margin-y: 0.45em;
3838
--control-button-group-margin-x: 0.3em;
3939
}

‎src/core/Event.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* @readonly
44
* @enum {String}
55
*/
6-
export const Event = {
6+
export const EventType = {
77
CHANGE: 'wc-change',
88
CLICK: 'wc-click',
99
EVENT_CLICK: 'ws-click',

‎src/form/FormSelectElement.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { html, css, nothing } from 'lit';
22
import { FormControlElement } from './FormControlElement';
3-
import { Event } from '../core/Event';
3+
import { EventType } from '../core/Event';
44
/**
55
* @class FormSelectElement
66
*
@@ -60,7 +60,7 @@ export class FormSelectElement extends FormControlElement {
6060
// Change the selected state when the input is changed
6161
onInput(event) {
6262
if (super.onInput(event)) {
63-
this.dispatchEvent(new CustomEvent(Event.CHANGE, {
63+
this.dispatchEvent(new CustomEvent(EventType.CHANGE, {
6464
bubbles: true,
6565
composed: true,
6666
detail: this.value,

‎src/form/FormSwitchElement.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { html, nothing } from 'lit';
22
import { FormControlElement } from './FormControlElement';
3-
import { Event } from '../core/Event';
3+
import { EventType } from '../core/Event';
44

55
/**
66
* @class FormSwitchElement
@@ -56,7 +56,7 @@ export class FormSwitchElement extends FormControlElement {
5656
onInput(event) {
5757
if (super.onInput(event)) {
5858
this.selected = event.target.checked;
59-
this.dispatchEvent(new CustomEvent(Event.CHANGE, {
59+
this.dispatchEvent(new CustomEvent(EventType.CHANGE, {
6060
bubbles: true,
6161
composed: true,
6262
detail: this.name || this.textContent.trim(),

‎src/index.html

+11-3
Original file line numberDiff line numberDiff line change
@@ -102,9 +102,9 @@ <h4>Card</h4>
102102
</script>
103103
</wc-card>
104104
<wc-card>
105-
<wc-control-button-group name="controls">
106-
<wc-button type="control">Close</wc-button>
107-
<wc-button type="control" disabled>Help</wc-button>
105+
<wc-control-button-group id="controls" name="controls">
106+
<wc-button name="close" type="control">Close</wc-button>
107+
<wc-button name="help" type="control" disabled>Help</wc-button>
108108
</wc-control-button-group>
109109
<h1>Header</h1>
110110
<h2>Subtitle</h2>
@@ -113,6 +113,14 @@ <h2>Subtitle</h2>
113113
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
114114
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
115115
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
116+
<script>
117+
document.querySelector('wc-control-button-group#controls').addEventListener('wc-click', (e) => {
118+
var card = e.target.closest('wc-card');
119+
if(card) {
120+
card.setAttribute('hidden', true);
121+
}
122+
});
123+
</script>
116124
</wc-card>
117125
<wc-card backgroundColor="success" width="12">
118126
<wc-control-button-group name="controls">

0 commit comments

Comments
 (0)