Skip to content

Commit 095cff7

Browse files
djthorpedjthorpe
committed
Updated server
1 parent 22a76d7 commit 095cff7

File tree

12 files changed

+293
-46
lines changed

12 files changed

+293
-46
lines changed

‎npm/helloworld/src/index.html

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,6 @@
2323
<wc-navitem>
2424
<wc-icon>info-circle</wc-icon>
2525
</wc-navitem>
26-
<wc-navitem>
27-
<wc-google-auth id="auth"></wc-google-auth>
28-
</wc-navitem>
2926
</wc-nav>
3027

3128
<wc-content>
@@ -49,7 +46,7 @@
4946

5047
<wc-content vertical>
5148
<wc-content>
52-
<wc-button color="primary">Primary</wc-button>
49+
<wc-button color="primary" onclick="document.querySelector('#login').visible = true">Login</wc-button>
5350
<wc-button color="secondary">Secondary</wc-button>
5451
<wc-button color="light">Light</wc-button>
5552
<wc-button color="dark">Dark</wc-button>
@@ -60,15 +57,25 @@
6057
<wc-button color="error">Error</wc-button>
6158
<wc-button disabled>Disabled</wc-button>
6259
</wc-content>
63-
<wc-content style="background-color: #f0f0f0;">
64-
<wc-piechart></wc-piechart>
65-
</wc-content>
6660
</wc-content>
6761

6862
</wc-content>
6963

7064
</wc-canvas>
7165

66+
<!-- Modal -->
67+
<wc-modal id="login" visible>
68+
<wc-form vertical>
69+
<h1>Login</h1>
70+
<wc-forminput name="email">Email</wc-forminput>
71+
<wc-forminput name="password">Password</wc-forminput>
72+
<wc-buttongroup>
73+
<wc-button color="white" onclick="document.querySelector('#login').visible = false">Login</wc-button>
74+
<wc-google-auth id="auth"></wc-google-auth>
75+
</wc-buttongroup>
76+
</wc-form>
77+
</wc-modal>
78+
7279
<!-- Place a toast at the bottom of the page -->
7380
<wc-toast></wc-toast>
7481
</body>

‎npm/helloworld/src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ document.addEventListener("DOMContentLoaded", () => {
1717
googleAuth.opts = {
1818
ClientId: '121760808688-hbiibnih1trt2vrokhrta17jgeuagp4k.apps.googleusercontent.com',
1919
Theme: 'outline',
20-
Size: 'small'
20+
Size: 'large'
2121
};
2222

2323

‎npm/helloworld/src/wc/core/GoogleAuth.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@ interface GoogleAuthOptions {
1717
export class GoogleAuth extends LitElement {
1818
private cookies: Cookies = new Cookies();
1919

20-
@property({ type: Object })
21-
opts: GoogleAuthOptions = { ClientId: '' };
20+
@property({ type: Object }) opts: GoogleAuthOptions = { ClientId: '' };
2221

2322
protected firstUpdated(_changedProperties: PropertyValues): void {
2423
super.firstUpdated(_changedProperties);

‎npm/helloworld/src/wc/layout/Form.ts

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { LitElement, html, css, nothing } from 'lit';
2+
import { customElement, property } from 'lit/decorators.js';
3+
4+
/**
5+
* @class FormInput
6+
*
7+
* This class is a form input element, which should be wrapped in a form element.
8+
*
9+
* @example
10+
* <wc-forminput name="email" value="">...</wc-forminput>
11+
*/
12+
@customElement('wc-form')
13+
export class Form extends LitElement {
14+
@property({ type: Boolean }) vertical: boolean;
15+
16+
render() {
17+
return html`
18+
<form class=${this.className || nothing}>
19+
<slot></slot>
20+
</form>
21+
`;
22+
}
23+
24+
25+
static get styles() {
26+
return css`
27+
form {
28+
display: flex;
29+
flex-direction: row;
30+
&.vertical {
31+
flex-direction: column;
32+
}
33+
}
34+
`;
35+
}
36+
37+
get className() {
38+
const classes = [];
39+
if (this.vertical) {
40+
classes.push('vertical');
41+
}
42+
return classes.join(' ');
43+
}
44+
}

‎npm/helloworld/src/wc/layout/FormInput.ts

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import { LitElement, html, css, nothing } from 'lit';
2+
import { customElement, property } from 'lit/decorators.js';
3+
4+
/**
5+
* @class FormInput
6+
*
7+
* This class is a form input element, which should be wrapped in a form element.
8+
*
9+
* @example
10+
* <wc-forminput name="email" value="">...</wc-forminput>
11+
*/
12+
@customElement('wc-forminput')
13+
export class FormInput extends LitElement {
14+
#internals: ElementInternals;
15+
@property({ type: String }) name: string;
16+
@property({ type: String }) value: string;
17+
@property({ type: Boolean }) disabled: boolean;
18+
@property({ type: Boolean }) required: boolean;
19+
@property({ type: Boolean }) autocomplete: boolean;
20+
21+
constructor() {
22+
super();
23+
24+
// Attach with the form
25+
this.#internals = this.attachInternals();
26+
}
27+
28+
render() {
29+
return html`
30+
<label class=${this.className || nothing}>
31+
<slot></slot><br>
32+
<input
33+
name=${this.name || nothing}
34+
value=${this.value || nothing}
35+
?disabled=${this.disabled}
36+
?required=${this.required}
37+
?autocomplete=${this.autocomplete}
38+
@input=${this.#onInput}>
39+
</label>
40+
`;
41+
}
42+
43+
static get styles() {
44+
return css`
45+
:host {
46+
margin: var(--form-control-margin);
47+
}
48+
label {
49+
cursor: pointer;
50+
user-select: none;
51+
font-size: var(--form-input-font-size-label);
52+
}
53+
input {
54+
margin: var(--form-input-margin);
55+
padding: var(--form-input-padding);
56+
border-width: var(--form-input-border-width);
57+
border-color: var(--form-input-border-color);
58+
background-color: var(--form-input-background-color);
59+
width: 100%;
60+
}
61+
`;
62+
}
63+
64+
get className() {
65+
const classes = [];
66+
if (this.disabled) {
67+
classes.push('disabled');
68+
}
69+
if (this.required) {
70+
classes.push('required');
71+
}
72+
if (this.autocomplete) {
73+
classes.push('autocomplete');
74+
}
75+
return classes.join(' ');
76+
}
77+
78+
static get formAssociated() {
79+
return true;
80+
}
81+
82+
// Form control properties
83+
get form() { return this.#internals ? this.#internals.form : null; }
84+
85+
// Form control properties
86+
get type() { return this.localName; }
87+
88+
// Form control properties
89+
get validity() { return this.#internals ? this.#internals.validity : null; }
90+
91+
// Form control properties
92+
get validationMessage() { return this.#internals ? this.#internals.validationMessage : null; }
93+
94+
// Form control properties
95+
get willValidate() { return this.#internals ? this.#internals.willValidate : null; }
96+
97+
98+
// Event hander for input event to update the value
99+
#onInput(event: Event) {
100+
if (!this.disabled) {
101+
this.value = event.target.value;
102+
this.#internals.setFormValue(this.value);
103+
return true;
104+
}
105+
return false;
106+
}
107+
}

‎npm/helloworld/src/wc/layout/Modal.ts

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { LitElement, html, css, nothing } from 'lit';
2+
import { customElement, property } from 'lit/decorators.js';
3+
4+
/**
5+
* @class Modal
6+
*
7+
* This class is used to display a modal window overlaying the screen,
8+
* which can be dismissed by the user.
9+
*
10+
* @example
11+
* <wc-modal>
12+
* <wc-nav>....</wc-nav>
13+
* <wc-content>....</wc-content>
14+
* <wc-content>....</wc-content>
15+
* </wc-modal>
16+
*/
17+
@customElement('wc-modal')
18+
export class Modal extends LitElement {
19+
@property({ type: Boolean }) visible: boolean = false;
20+
21+
render() {
22+
return html`
23+
<div class=${this.#canvasClassName || nothing}></div>
24+
<div class=${this.#contentClassName || nothing}><slot></slot></div>
25+
`;
26+
}
27+
28+
static get styles() {
29+
return css`
30+
div {
31+
position: fixed;
32+
left: 0;
33+
top: 0;
34+
right: 0;
35+
bottom: 0;
36+
overflow-x: hidden;
37+
overflow-y: auto;
38+
transition: var(--modal-transition);
39+
40+
&:not(.visible) {
41+
visibility: hidden;
42+
opacity: 0;
43+
}
44+
45+
&.visible {
46+
visibility: visible;
47+
opacity: 1;
48+
&.canvas {
49+
opacity: var(--modal-opacity-canvas);
50+
}
51+
}
52+
}
53+
54+
.canvas {
55+
background-color: var(--modal-background-color-canvas);
56+
}
57+
58+
.content {
59+
background-color: var(--modal-background-color);
60+
margin: var(--modal-margin);
61+
border: var(--modal-border);
62+
border-radius: var(--modal-border-radius);
63+
}
64+
`;
65+
}
66+
67+
get #canvasClassName() {
68+
const classes = [];
69+
classes.push('canvas');
70+
if (this.visible) {
71+
classes.push('visible');
72+
}
73+
return classes.join(' ');
74+
}
75+
76+
get #contentClassName() {
77+
const classes = [];
78+
classes.push('content');
79+
if (this.visible) {
80+
classes.push('visible');
81+
}
82+
return classes.join(' ');
83+
}
84+
}

‎npm/helloworld/src/wc/layout/Toast.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export class Toast extends LitElement {
5353
return css`
5454
:host {
5555
position: fixed;
56-
z-index: 1000;
56+
z-index: 1001;
5757
right: 0;
5858
bottom: 0;
5959
}
@@ -64,7 +64,7 @@ export class Toast extends LitElement {
6464
padding: var(--toast-padding);
6565
border: var(--toast-border);
6666
border-radius: var(--toast-border-radius);
67-
transition: visibility 0.2s, opacity 0.2s ease-in-out;
67+
transition: var(--toast-transition);
6868
cursor: pointer;
6969
user-select: none;
7070

‎npm/helloworld/src/wc/root.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ import './tokens.css';
66
import './layout/Button'
77
import './layout/Canvas'
88
import './layout/Content'
9+
import './layout/Form'
10+
import './layout/FormInput'
911
import './layout/Icon'
12+
import './layout/Modal'
1013
import './layout/Nav'
1114
import './layout/NavItem'
1215
import './layout/NavSpace'

0 commit comments

Comments
 (0)