Skip to content

Commit 91a5c9b

Browse files
djthorpedjthorpe
committed
Updated for form elements
1 parent 7b3c51f commit 91a5c9b

File tree

5 files changed

+136
-4
lines changed

5 files changed

+136
-4
lines changed

‎src/component/form/FormElement.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,15 @@ export class FormElement extends LitElement {
3333
action: { type: String },
3434
};
3535
}
36+
static get styles() {
37+
return css`
38+
form {
39+
display: inline-block;
40+
width: 100%;
41+
margin: var(--form-margin);
42+
}
43+
`;
44+
}
3645
render() {
3746
return html`
3847
<form method="${this.method}" action="${this.action}"><slot></slot></form>

‎src/component/form/FormInputElement.js‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
2+
import { LitElement, html, css } from 'lit';
3+
4+
/**
5+
* FormInputElement
6+
*/
7+
export class FormInputElement extends LitElement {
8+
constructor() {
9+
super();
10+
// Default properties
11+
this.name = 'input';
12+
this.required = false;
13+
this.autocomplete = false;
14+
this.labelabove = false;
15+
}
16+
static get properties() {
17+
return {
18+
/**
19+
* The name for the input
20+
* @type {string}
21+
*/
22+
name: { type: String },
23+
24+
/**
25+
* The value for the input
26+
* @type {string}
27+
*/
28+
value: { type: String },
29+
30+
/**
31+
* The placeholder text for the input
32+
* @type {string}
33+
*/
34+
placeholder: { type: String },
35+
36+
/**
37+
* Whether the input is required to be filled
38+
* for the form to submit
39+
* @type {boolean}
40+
*/
41+
required: { type: Boolean },
42+
43+
/**
44+
* The pattern used to validate the value on submission
45+
* @type {string}
46+
*/
47+
pattern: { type: String },
48+
49+
/**
50+
* Whether auto-complete is enabled
51+
* @type {boolean}
52+
*/
53+
autocomplete: { type: Boolean },
54+
55+
/**
56+
* Label position above, rather than to the left
57+
* @type {boolean}
58+
*/
59+
labelabove: { type: Boolean },
60+
};
61+
}
62+
static get styles() {
63+
return css`
64+
div {
65+
display: flex;
66+
justify-content: start;
67+
}
68+
.labelbeside {
69+
flex-direction: row;
70+
}
71+
.labelabove {
72+
flex-direction: column;
73+
}
74+
input {
75+
flex: 1;
76+
background-color: var(--form-input-background-color);
77+
color: var(--form-input-color);
78+
margin: var(--form-input-margin-y) var(--form-input-margin-x) var(--form-input-margin-y) var(--form-input-margin-x);
79+
padding: var(--form-input-padding-y) var(--form-input-padding-x) var(--form-input-padding-y) var(--form-input-padding-x);
80+
font-size: var(--form-input-font-size);
81+
font-weight: var(--form-input-font-weight);
82+
line-height: var(--form-input-line-height);
83+
border: var(--form-input-border);
84+
}
85+
input:focus {
86+
background-color: var(--form-input-background-color-focus);
87+
color: var(--form-input-color-focus);
88+
border: var(--form-input-border-focus);
89+
}
90+
label {
91+
display: block;
92+
min-width: 10em;
93+
background-color: var(--form-label-background-color);
94+
color: var(--form-label-color);
95+
padding: var(--form-label-padding);
96+
font-size: var(--form-label-font-size);
97+
font-weight: var(--form-label-font-weight);
98+
line-height: var(--form-label-line-height);
99+
border: var(--form-label-border);
100+
}
101+
`;
102+
}
103+
render() {
104+
return html`
105+
<div class="${this.labelabove ? 'labelabove' : 'labelbeside'}">
106+
<label for="${this.name}"><slot></slot></label>
107+
<input type="text" name="${this.name}" ?value="${this.value}" ?required="${this.required}" placeholder="${this.placeholder}" autocomplete="${this.autocomplete ? 'on' : 'off'}" ?pattern="${this.pattern}">
108+
</div>
109+
`;
110+
}
111+
}
112+
113+
customElements.define('wc-form-input', FormInputElement);

‎src/css/core.css‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -156,8 +156,10 @@
156156
/* forms */
157157
--form-input-background-color: none;
158158
--form-input-color: var(--dark-color);
159-
--form-input-margin: calc(var(--spacer) * 0.5) 0;
160-
--form-input-padding: calc(var(--spacer) * 0.5) calc(var(--spacer) * 0.5);
159+
--form-input-margin-y: calc(var(--spacer) * 0.1);
160+
--form-input-margin-x: 0;
161+
--form-input-padding-x: calc(var(--spacer) * 0.5);
162+
--form-input-padding-y: calc(var(--spacer) * 0.5);
161163
--form-input-font-size: var(--font-size-normal);
162164
--form-input-font-weight: var(--font-weight-normal);
163165
--form-input-line-height: 1;
@@ -177,7 +179,7 @@
177179
--form-label-color: var(--dark-color);
178180
--form-label-padding: calc(var(--spacer) * 0.5) calc(var(--spacer) * 0.5);
179181
--form-label-font-size: var(--font-size-small);
180-
--form-label-font-weight: var(--font-weight-light);
182+
--form-label-font-weight: var(--font-weight-abold);
181183
--form-label-line-height: 1;
182184
--form-label-border: none;
183185

‎src/index.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,9 +103,16 @@ <h1>Modal</h1>
103103
<div class="container">
104104
<wc-form>
105105
<h1>Form</h1>
106-
<wc-form-input name="name" label="Name" placeholder="Enter your name" required></wc-form-input>
106+
<wc-form-input name="name" placeholder="Enter your name" required labelabove>Name</wc-form-input>
107+
<wc-form-input name="email" placeholder="Enter your email (optional)" autocomplete labelabove>Email</wc-form-input>
108+
<wc-form-input name="address" placeholder="Enter your address" required labelabove>Address</wc-form-input>
109+
<wc-button-group>
110+
<wc-button name="save" submit>Save</wc-button>
111+
<wc-button name="cancel">Cancel</wc-button>
112+
</wc-button-group>
107113
</wc-form>
108114
</div>
115+
<hr>
109116

110117
</body>
111118

‎src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import './component/modal/SideModalElement';
2323

2424
// Form Elements
2525
import './component/form/FormElement';
26+
import './component/form/FormInputElement';
2627

2728
// CSS
2829
import './css/core.css';

0 commit comments

Comments
 (0)