Skip to content

Commit 067bc43

Browse files
djthorpedjthorpe
committed
Added form select
1 parent 49a5dd9 commit 067bc43

File tree

10 files changed

+319
-103
lines changed

10 files changed

+319
-103
lines changed

‎src/app/CanvasElement.js‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -45,43 +45,43 @@ export class CanvasElement extends LitElement {
4545
display: flex;
4646
}
4747
48-
div:not(.vertical) {
49-
flex-direction: row;
50-
}
51-
52-
div.vertical {
53-
flex-direction: column;
54-
}
55-
5648
/* Any canvas section is in flexbox mode with a fixed size */
5749
::slotted(wc-canvas-section),::slotted(wc-canvas-navbar) {
5850
display: flex;
5951
justify-content: start;
6052
border-style: none;
6153
}
6254
63-
/* The first section in vertical mode gets a border below */
64-
div.vertical > ::slotted(wc-canvas-navbar:first-child),div.vertical > ::slotted(wc-canvas-section:first-child) {
65-
min-height: 40px;
66-
border-bottom-style: solid;
67-
}
55+
div.vertical {
56+
flex-direction: column;
6857
69-
/* The first section in horizontal mode gets a border right */
70-
div:not(.vertical) > ::slotted(wc-canvas-navbar:first-child), div:not(.vertical) > ::slotted(wc-canvas-section:first-child) {
71-
min-width: 60px;
72-
border-right-style: solid;
73-
}
58+
/* The first section in vertical mode gets a border below */
59+
> ::slotted(wc-canvas-navbar:first-child),::slotted(wc-canvas-section:first-child) {
60+
min-height: 40px;
61+
border-bottom-style: solid;
62+
}
7463
75-
/* The last section in vertical mode gets a border above */
76-
div.vertical > ::slotted(wc-canvas-navbar:last-child),div.vertical > ::slotted(wc-canvas-section:last-child) {
77-
min-height: 30px;
78-
border-top-style: solid;
64+
/* The last section in vertical mode gets a border above */
65+
> ::slotted(wc-canvas-navbar:last-child),::slotted(wc-canvas-section:last-child) {
66+
min-height: 30px;
67+
border-top-style: solid;
68+
}
7969
}
8070
81-
/* The last section in horizonal mode gets a border left */
82-
div:not(.vertical) > ::slotted(wc-canvas-navbar:last-child),div:not(.vertical) > ::slotted(wc-canvas-section:last-child) {
83-
min-width: 60px;
84-
border-left-style: solid;
71+
div:not(.vertical) {
72+
flex-direction: row;
73+
74+
/* The first section in horizontal mode gets a border right */
75+
> ::slotted(wc-canvas-navbar:first-child),::slotted(wc-canvas-section:first-child) {
76+
min-width: 60px;
77+
border-right-style: solid;
78+
}
79+
80+
/* The last section in horizonal mode gets a border left */
81+
> ::slotted(wc-canvas-navbar:last-child),::slotted(wc-canvas-section:last-child) {
82+
min-width: 60px;
83+
border-left-style: solid;
84+
}
8585
}
8686
8787
/* Flex containers stretch */

‎src/app/CanvasNavbarElement.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export class CanvasNavbarElement extends CanvasSectionElement {
3838
div {
3939
display: flex;
4040
align-items: start;
41-
flex: 1 0;
41+
flex: 1;
4242
}
4343
`;
4444
}

‎src/app/CardElement.js‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import { LitElement, html, css, nothing } from 'lit';
2+
3+
/**
4+
* @class CardElement
5+
*
6+
* This class is used as a information card to display content
7+
*
8+
* @property {String} backgroundColor - The color theme of the card, default light
9+
* @property {Number} width - The width of the card in 1/12th of the available space
10+
*
11+
* @example
12+
* <wc-card-group>
13+
* <wc-card backgroundColor="error">
14+
* <h1>Card Title</h1>
15+
* </wc-card>
16+
* </wc-card-group>
17+
*/
18+
export class CardElement extends LitElement {
19+
static get localName() {
20+
return 'wc-card';
21+
}
22+
23+
constructor() {
24+
super();
25+
26+
// Default properties
27+
this.backgroundColor = 'light';
28+
this.width = 0;
29+
}
30+
31+
static get properties() {
32+
return {
33+
backgroundColor: { type: String, attribute: true },
34+
width: { type: Number, attribute: true },
35+
};
36+
}
37+
38+
static get styles() {
39+
return css`
40+
`;
41+
}
42+
43+
render() {
44+
this.style.maxWidth = `${this.flexBasis}`;
45+
this.style.flexBasis = `${this.flexBasis}`;
46+
return html`
47+
<div class=${this.classes.join(' ') || nothing}>
48+
<slot></slot>
49+
</div>
50+
`;
51+
}
52+
53+
get classes() {
54+
const classes = [];
55+
classes.push('card');
56+
if (this.width) {
57+
classes.push(`width-${this.width}`);
58+
}
59+
if (this.backgroundColor) {
60+
classes.push(`bg-${this.backgroundColor}`);
61+
}
62+
return classes;
63+
}
64+
65+
get flexBasis() {
66+
if (this.width > 0 && this.width <= 12) {
67+
return `${this.width * (100 / 12)}%`;
68+
}
69+
return 'none';
70+
}
71+
}
72+
73+
/*
74+
--primary-color: #16f;
75+
--secondary-color: #aaa;
76+
--success-color: #285;
77+
--warning-color: #f72;
78+
--error-color: #f55;
79+
--light-color: #eee;
80+
--white-color: #fff;
81+
--dark-color: #333;
82+
--black-color: #000;
83+
--grey-10-color: #EAEAEA;
84+
--grey-20-color: #D0D0D0;
85+
--grey-30-color: #B6B6B6;
86+
--grey-40-color: #9C9C9C;
87+
--grey-50-color: #828282;
88+
--grey-60-color: #6A6A6A;
89+
--grey-70-color: #4E4E4E;
90+
--grey-80-color: #343434;
91+
--grey-90-color: #1A1A1A;
92+
*/

‎src/app/CardGroupElement.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { LitElement, html, css, nothing } from 'lit';
2+
3+
/**
4+
* @class CardGroupElement
5+
*
6+
* This class is used as a group of information cards for layout purposes
7+
*
8+
* @example
9+
* <wc-card-group>
10+
* <wc-card backgroundColor="error">
11+
* <h1>Card Title</h1>
12+
* </wc-card>
13+
* </wc-card-group>
14+
*/
15+
export class CardGroupElement extends LitElement {
16+
static get localName() {
17+
return 'wc-card-group';
18+
}
19+
20+
static get styles() {
21+
return css`
22+
:host {
23+
flex: 0 1 auto;
24+
}
25+
div.card-group {
26+
display: flex;
27+
flex-wrap: wrap;
28+
}
29+
30+
/* Colours */
31+
::slotted(wc-card) {
32+
border: 1px solid var(--grey-20-color);
33+
border-radius: var(--card-border-radius);
34+
margin: var(--card-margin-y) var(--card-margin-x);
35+
padding: var(--card-padding-y) var(--card-padding-x);
36+
}
37+
::slotted(wc-card) { /* TODO: Default should vary based on theme */
38+
background-color: var(--light-color);
39+
color: var(--dark-color);
40+
}
41+
::slotted(wc-card[backgroundColor="primary"]) {
42+
background-color: var(--primary-color);
43+
color: var(--light-color);
44+
}
45+
::slotted(wc-card[backgroundColor="secondary"]) {
46+
background-color: var(--secondary-color);
47+
color: var(--dark-color);
48+
}
49+
::slotted(wc-card[backgroundColor="success"]) {
50+
background-color: var(--success-color);
51+
color: var(--light-color);
52+
}
53+
`;
54+
}
55+
56+
render() {
57+
return html`
58+
<div class=${this.classes.join(' ') || nothing}>
59+
<slot></slot>
60+
</div>
61+
`;
62+
}
63+
64+
// eslint-disable-next-line class-methods-use-this
65+
get classes() {
66+
const classes = [];
67+
classes.push('card-group');
68+
return classes;
69+
}
70+
}
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/app/NavGroupElement.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,9 @@ export class NavGroupElement extends LitElement {
5757
}
5858
::slotted(wc-nav-item) {
5959
flex: 0;
60+
margin: var(--nav-item-margin-y) var(--nav-item-margin-x);
6061
padding: var(--nav-item-padding-y) var(--nav-item-padding-x);
62+
border-radius: var(--nav-item-border-radius);
6163
}
6264
::slotted(wc-nav-spacer) {
6365
flex: 1;

‎src/app/app.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
/* Navigational items */
33
--nav-item-padding-x: 0.5em;
44
--nav-item-padding-y: 0.5em;
5+
--nav-item-margin-x: 0.5em;
6+
--nav-item-margin-y: 0;
7+
--nav-item-border-radius: var(--border-radius);
58
--nav-item-hover-font-weight: var(--font-weight-semibold);
69
--nav-item-selected-color: var(--light-color);
710
--nav-item-disabled-color: var(--grey-40-color);
@@ -14,4 +17,11 @@
1417
--icon-size-medium: 1.5em;
1518
--icon-size-large: 2em;
1619
--icon-size-xlarge: 3em;
20+
21+
/* card */
22+
--card-margin-x: 0.5em;
23+
--card-margin-y: 0.5em;
24+
--card-padding-x: 0.4em;
25+
--card-padding-y: 0.4em;
26+
--card-border-radius: var(--border-radius);
1727
}

‎src/app/app.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { NavItemElement } from './NavItemElement';
1010
import { NavSpacerElement } from './NavSpacerElement';
1111
import { NavDividerElement } from './NavDividerElement';
1212
import { IconElement } from './IconElement';
13+
import { CardGroupElement } from './CardGroupElement';
14+
import { CardElement } from './CardElement';
1315

1416
// Web Components
1517
customElements.define(CanvasElement.localName, CanvasElement); // wc-canvas
@@ -20,3 +22,6 @@ customElements.define(NavItemElement.localName, NavItemElement); // wc-nav-item
2022
customElements.define(NavSpacerElement.localName, NavSpacerElement); // wc-nav-spacer
2123
customElements.define(NavDividerElement.localName, NavDividerElement); // wc-nav-divider
2224
customElements.define(IconElement.localName, IconElement); // wc-icon
25+
customElements.define(CardGroupElement.localName, CardGroupElement); // wc-card-group
26+
customElements.define(CardElement.localName, CardElement); // wc-card
27+

‎src/form/FormSelectElement.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { html, nothing } from 'lit';
2+
import { FormControlElement } from './FormControlElement';
3+
4+
/**
5+
* @class FormSelectElement
6+
*
7+
* This class is used to create a selection from many options
8+
*
9+
* @example
10+
* <wc-form-select name="colour" options='["red","green","blue"]'>Colour</wc-form-select>
11+
*/
12+
export class FormSelectElement extends FormControlElement {
13+
static get localName() {
14+
return 'wc-form-select';
15+
}
16+
17+
constructor() {
18+
super();
19+
20+
// Default properties
21+
this.options = [];
22+
}
23+
24+
static get properties() {
25+
return {
26+
options: { type: Array },
27+
};
28+
}
29+
30+
render() {
31+
console.log(this.options);
32+
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>
42+
`;
43+
}
44+
45+
// Return classes for the switch control
46+
get classes() {
47+
const classes = super.classes;
48+
classes.push('select');
49+
return classes;
50+
}
51+
52+
// Change the selected state when the input is changed
53+
onInput(event) {
54+
console.log('onInput=', event.target, event.target.selectedIndex);
55+
super.onInput(event);
56+
}
57+
}

‎src/form/form.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import './form.css';
33

44
// Classes
55
import { FormSwitchElement } from './FormSwitchElement';
6+
import { FormSelectElement } from './FormSelectElement';
67

78
// Web Components
8-
customElements.define(FormSwitchElement.localName, FormSwitchElement); // w2-form-switch
9+
customElements.define(FormSwitchElement.localName, FormSwitchElement); // wc-form-switch
10+
customElements.define(FormSelectElement.localName, FormSelectElement); // wc-form-select

0 commit comments

Comments
 (0)