Skip to content

Commit e1e74a6

Browse files
djthorpedjthorpe
committed
Updates for select
1 parent 067bc43 commit e1e74a6

File tree

6 files changed

+105
-48
lines changed

6 files changed

+105
-48
lines changed

‎src/app/CardGroupElement.js‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,30 @@ export class CardGroupElement extends LitElement {
5050
background-color: var(--success-color);
5151
color: var(--light-color);
5252
}
53+
::slotted(wc-card[backgroundColor="warning"]) {
54+
background-color: var(--warning-color);
55+
color: var(--light-color);
56+
}
57+
::slotted(wc-card[backgroundColor="error"]) {
58+
background-color: var(--error-color);
59+
color: var(--light-color);
60+
}
61+
::slotted(wc-card[backgroundColor="light"]) {
62+
background-color: var(--light-color);
63+
color: var(--dark-color);
64+
}
65+
::slotted(wc-card[backgroundColor="dark"]) {
66+
background-color: var(--dark-color);
67+
color: var(--light-color);
68+
}
69+
::slotted(wc-card[backgroundColor="black"]) {
70+
background-color: var(--black-color);
71+
color: var(--white-color);
72+
}
73+
::slotted(wc-card[backgroundColor="white"]) {
74+
background-color: var(--white-color);
75+
color: var(--black-color);
76+
}
5377
`;
5478
}
5579

@@ -68,24 +92,3 @@ export class CardGroupElement extends LitElement {
6892
return classes;
6993
}
7094
}
71-
72-
/*
73-
--primary-color: #16f;
74-
--secondary-color: #aaa;
75-
--success-color: #285;
76-
--warning-color: #f72;
77-
--error-color: #f55;
78-
--light-color: #eee;
79-
--white-color: #fff;
80-
--dark-color: #333;
81-
--black-color: #000;
82-
--grey-10-color: #EAEAEA;
83-
--grey-20-color: #D0D0D0;
84-
--grey-30-color: #B6B6B6;
85-
--grey-40-color: #9C9C9C;
86-
--grey-50-color: #828282;
87-
--grey-60-color: #6A6A6A;
88-
--grey-70-color: #4E4E4E;
89-
--grey-80-color: #343434;
90-
--grey-90-color: #1A1A1A;
91-
*/

‎src/form/FormControlElement.js‎

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

43
/**
54
* @class FormControlElement
@@ -10,6 +9,7 @@ import { Event } from '../core/Event';
109
* @property {String} value - The value of the control
1110
* @property {Boolean} disabled - Whether the form control is disabled
1211
* @property {Boolean} required - Whether the form control is required before submitting
12+
* @property {Boolean} autocomplete - Whether the form control allows autocomplete
1313
*
1414
* @example
1515
* <wc-form-control>Power</wc-form-switch>
@@ -27,7 +27,10 @@ export class FormControlElement extends LitElement {
2727

2828
// Default properties
2929
this.name = '';
30+
this.value = '';
3031
this.disabled = false;
32+
this.required = false;
33+
this.autocomplete = false;
3134
}
3235

3336
static get formAssociated() {
@@ -40,6 +43,7 @@ export class FormControlElement extends LitElement {
4043
value: { type: String },
4144
disabled: { type: Boolean },
4245
required: { type: Boolean },
46+
autocomplete: { type: Boolean },
4347
};
4448
}
4549

@@ -72,6 +76,25 @@ export class FormControlElement extends LitElement {
7276
background-position: right center;
7377
}
7478
}
79+
80+
label.select {
81+
cursor: inherit;
82+
83+
& select {
84+
width: 100%;
85+
cursor: pointer;
86+
font-family: inherit;
87+
appearance: none;
88+
padding: var(--form-select-padding-y) var(--form-select-padding-x);
89+
background-color: var(--form-select-background-color);
90+
border: 1px solid var(--form-select-border-color);
91+
border-radius: var(--form-select-border-radius);
92+
93+
&:focus {
94+
outline: 0;
95+
}
96+
}
97+
}
7598
`;
7699
}
77100

@@ -83,6 +106,7 @@ export class FormControlElement extends LitElement {
83106
value=${this.value || nothing}
84107
?disabled=${this.disabled}
85108
?required=${this.required}
109+
?autocomplete=${this.autocomplete}
86110
@input=${this.onInput}>
87111
<slot></slot>
88112
</label>
@@ -121,14 +145,8 @@ export class FormControlElement extends LitElement {
121145
if (!this.disabled) {
122146
this.value = event.target.value;
123147
this.internals.setFormValue(this.value);
124-
125-
// Dispatch a click event
126-
this.dispatchEvent(new CustomEvent(
127-
Event.CHANGE, {
128-
bubbles: true,
129-
composed: true,
130-
detail: this.name || this.textContent,
131-
}));
148+
return true;
132149
}
150+
return false;
133151
}
134152
}

‎src/form/FormSelectElement.js‎

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1-
import { html, nothing } from 'lit';
1+
import { html, css, nothing } from 'lit';
22
import { FormControlElement } from './FormControlElement';
3-
3+
import { Event } from '../core/Event';
44
/**
55
* @class FormSelectElement
66
*
77
* This class is used to create a selection from many options
88
*
9+
* @property {Array} options - The list of options to select from
10+
* @property {Boolean} multiple - Whether multiple options can be selected
11+
*
912
* @example
1013
* <wc-form-select name="colour" options='["red","green","blue"]'>Colour</wc-form-select>
1114
*/
@@ -19,26 +22,31 @@ export class FormSelectElement extends FormControlElement {
1922

2023
// Default properties
2124
this.options = [];
25+
this.multiple = false;
2226
}
2327

2428
static get properties() {
2529
return {
2630
options: { type: Array },
31+
multiple: { type: Boolean },
2732
};
2833
}
2934

3035
render() {
31-
console.log(this.options);
3236
return html`
33-
<select
34-
name=${this.name || nothing}
35-
?disabled=${this.disabled}
36-
@input=${this.onInput}>
37-
<option disabled selected>${this.textContent.trim()}</option>
38-
${this.options.map(option => html`
39-
<option>${option}</option>
40-
`)}
41-
</select>
37+
<label class=${this.classes.join(' ') || nothing}>
38+
<nobr>${this.textContent.trim()}</nobr>
39+
<select
40+
name=${this.name || nothing}
41+
?disabled=${this.disabled}
42+
?autocomplete=${this.autocomplete}
43+
?multiple=${this.multiple}
44+
@input=${this.onInput}>
45+
${this.options.map(option => html`
46+
<option>${option}</option>
47+
`)}
48+
</select>
49+
</label>
4250
`;
4351
}
4452

@@ -51,7 +59,12 @@ export class FormSelectElement extends FormControlElement {
5159

5260
// Change the selected state when the input is changed
5361
onInput(event) {
54-
console.log('onInput=', event.target, event.target.selectedIndex);
55-
super.onInput(event);
62+
if (super.onInput(event)) {
63+
this.dispatchEvent(new CustomEvent(Event.CHANGE, {
64+
bubbles: true,
65+
composed: true,
66+
detail: this.value,
67+
}));
68+
}
5669
}
5770
}

‎src/form/FormSwitchElement.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { html, nothing } from 'lit';
22
import { FormControlElement } from './FormControlElement';
3+
import { Event } from '../core/Event';
34

45
/**
56
* @class FormSwitchElement
@@ -53,9 +54,13 @@ export class FormSwitchElement extends FormControlElement {
5354

5455
// Change the selected state when the input is changed
5556
onInput(event) {
56-
if (!this.disabled) {
57+
if (super.onInput(event)) {
5758
this.selected = event.target.checked;
59+
this.dispatchEvent(new CustomEvent(Event.CHANGE, {
60+
bubbles: true,
61+
composed: true,
62+
detail: this.name || this.textContent.trim(),
63+
}));
5864
}
59-
super.onInput(event);
6065
}
6166
}

‎src/form/form.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,10 @@
1111
--form-switch-border-radius: var(--form-switch-width);
1212
--form-switch-background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8' fill='currentColor'><circle r='3'/></svg>");
1313
--form-switch-transition: 300ms;
14+
15+
/* Selects */
16+
--form-select-padding-x: 0.5em;
17+
--form-select-padding-y: 0.1em;
18+
--form-select-border-color: var(--control-color);
19+
--form-select-background-color: var(--control-color);
1420
}

‎src/index.html‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,21 @@ <h4>Card</h4>
8585
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
8686
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
8787
</wc-card>
88-
<wc-card backgroundColor="secondary" width="2">
88+
<wc-card id="card" backgroundColor="secondary" width="2">
8989
<h4>Card</h4>
90-
<wc-form-select name="backgroundColor" options='[ "primary", "secondary", "success" ]'>Background Colour</wc-form-select>
90+
<wc-form-select id="backgroundColor" options='[ "primary", "secondary", "light", "dark", "black", "white", "success", "warning", "error" ]'>Background
91+
Colour</wc-form-select>
92+
<script>
93+
document.querySelector('wc-form-select#backgroundColor').addEventListener('wc-change', (e) => {
94+
document.querySelector('wc-card#card').setAttribute('backgroundColor', e.detail);
95+
});
96+
</script>
97+
<wc-form-select id="width" options='["",1,2,3,4,5,6,7,8,9,10,11,12]'>Width</wc-form-select>
98+
<script>
99+
document.querySelector('wc-form-select#width').addEventListener('wc-change', (e) => {
100+
document.querySelector('wc-card#card').setAttribute('width', e.detail);
101+
});
102+
</script>
91103
</wc-card>
92104
<wc-card>
93105
<h1>Header</h1>

0 commit comments

Comments
 (0)