Skip to content

Commit f3aac7f

Browse files
djthorpedjthorpe
committed
Updates
1 parent 8bf0854 commit f3aac7f

File tree

8 files changed

+139
-54
lines changed

8 files changed

+139
-54
lines changed

‎src/component/button/ButtonElement.js‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,15 @@ import Event from '../../core/Event';
66
* A button element
77
*/
88
export class ButtonElement extends LitElement {
9+
constructor() {
10+
super();
11+
// Default properties
12+
this.name = '';
13+
this.disabled = false;
14+
this.link = '';
15+
this.transform = 'none';
16+
this.submit = false;
17+
}
918
static get properties() {
1019
return {
1120
/**
@@ -30,7 +39,13 @@ export class ButtonElement extends LitElement {
3039
* The text transform, none, uppercase, lowercase,capitalize
3140
* @type {String}
3241
*/
33-
transform: { type: String },
42+
transform: { type: String },
43+
44+
/**
45+
* The text transform, none, uppercase, lowercase,capitalize
46+
* @type {String}
47+
*/
48+
submit: { type: Boolean },
3449
};
3550
}
3651

@@ -90,7 +105,9 @@ export class ButtonElement extends LitElement {
90105
}
91106
`;
92107
}
93-
108+
buttonType() {
109+
return this.submit ? 'submit' : 'button';
110+
}
94111
render() {
95112
return html`
96113
${this.link
@@ -100,29 +117,19 @@ export class ButtonElement extends LitElement {
100117
</a>
101118
`
102119
: html`
103-
<button role="button" type="button" class="button ${this.transform ? `text-transform-${this.transform}` : ''}" ?disabled="${this.disabled}" @click=${this.onClick}>
120+
<button role="button" type="${this.buttonType()}" class="button ${this.transform ? `text-transform-${this.transform}` : ''}" ?disabled="${this.disabled}" @click=${this.onClick}>
104121
<slot></slot>
105122
</button>
106123
`}
107124
`;
108125
}
109-
110-
constructor() {
111-
super();
112-
// Default properties
113-
this.disabled = false;
114-
this.name = '';
115-
this.link = '';
116-
this.transform = 'none';
117-
}
118-
119126
onClick() {
120127
this.dispatchEvent(new CustomEvent(
121-
Event.EVENT_CLICK, {
122-
bubbles: true,
123-
composed: true,
124-
detail: this.name || this.textContent
125-
},
128+
Event.EVENT_CLICK, {
129+
bubbles: true,
130+
composed: true,
131+
detail: this.name || this.textContent
132+
},
126133
));
127134
}
128135
}

‎src/component/form/FormElement.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,20 @@ export class FormElement extends LitElement {
4444
}
4545
render() {
4646
return html`
47-
<form method="${this.method}" action="${this.action}"><slot></slot></form>
47+
<form method="${this.method}" name="${this.name}" action="${this.action}" @submit=${this.onSubmit}>
48+
<slot></slot>
49+
</form>
4850
`;
4951
}
52+
submit() {
53+
if(this.shadowRoot) {
54+
this.shadowRoot.querySelector('form').submit();
55+
}
56+
}
57+
onSubmit(event) {
58+
event.preventDefault();
59+
console.log('Form submitted');
60+
}
5061
}
5162

5263
customElements.define('wc-form', FormElement);

‎src/component/form/FormInputElement.js‎

Lines changed: 58 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,25 @@ import { LitElement, html, css } from 'lit';
55
* FormInputElement
66
*/
77
export class FormInputElement extends LitElement {
8+
#internals;
89
constructor() {
910
super();
11+
12+
// Attach with the form
13+
this.#internals = this.attachInternals();
14+
1015
// Default properties
1116
this.name = 'input';
17+
this.value = '';
18+
this.placeholder = '';
1219
this.required = false;
20+
this.pattern = '';
1321
this.autocomplete = false;
1422
this.labelabove = false;
23+
this.rows = 0;
24+
}
25+
static get formAssociated() {
26+
return true;
1527
}
1628
static get properties() {
1729
return {
@@ -57,6 +69,16 @@ export class FormInputElement extends LitElement {
5769
* @type {boolean}
5870
*/
5971
labelabove: { type: Boolean },
72+
73+
/**
74+
* The number of rows (for textarea)
75+
*/
76+
rows: { type: Number },
77+
78+
/**
79+
* Whether the control is disabled
80+
*/
81+
disabled: { type: Boolean },
6082
};
6183
}
6284
static get styles() {
@@ -71,43 +93,63 @@ export class FormInputElement extends LitElement {
7193
.labelabove {
7294
flex-direction: column;
7395
}
74-
input {
96+
.input {
7597
flex: 1;
7698
background-color: var(--form-input-background-color);
7799
color: var(--form-input-color);
78100
margin: var(--form-input-margin-y) var(--form-input-margin-x) var(--form-input-margin-y) var(--form-input-margin-x);
79101
padding: var(--form-input-padding-y) var(--form-input-padding-x) var(--form-input-padding-y) var(--form-input-padding-x);
102+
font-family: inherit;
80103
font-size: var(--form-input-font-size);
81104
font-weight: var(--form-input-font-weight);
82105
line-height: var(--form-input-line-height);
83106
border: var(--form-input-border);
84107
}
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-
}
108+
.input:focus {
109+
background-color: var(--form-input-background-color-focus);
110+
color: var(--form-input-color-focus);
111+
border: var(--form-input-border-focus);
112+
}
90113
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);
114+
display: block;
115+
min-width: 10em;
116+
background-color: var(--form-label-background-color);
117+
color: var(--form-label-color);
118+
padding: var(--form-label-padding-y) var(--form-label-padding-x) var(--form-label-padding-y) var(--form-label-padding-x);
119+
font-size: var(--form-label-font-size);
120+
font-weight: var(--form-label-font-weight);
121+
line-height: var(--form-label-line-height);
122+
border: var(--form-label-border) solid red;
100123
}
124+
textarea {
125+
resize: none;
126+
}
101127
`;
102128
}
129+
renderInput() {
130+
if (this.rows > 0) {
131+
return html`
132+
<textarea part="input" class="input" name="${this.name}" placeholder=${this.placeholder} rows=${this.rows} ?disabled=${this.disabled} autocomplete="${this.autocomplete ? 'on' : 'off'}" pattern="${this.pattern}">${this.value}</textarea>
133+
`;
134+
} else {
135+
return html`
136+
<input type="text" class="input" name="${this.name}" value="${this.value}" ?required="${this.required}" placeholder="${this.placeholder}" ?disabled=${this.disabled} autocomplete="${this.autocomplete ? 'on' : 'off'}" pattern="${this.pattern}"></input>
137+
`;
138+
}
139+
}
103140
render() {
141+
const renderInput = this.renderInput();
104142
return html`
105143
<div class="${this.labelabove ? 'labelabove' : 'labelbeside'}">
106144
<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}">
145+
${renderInput}
108146
</div>
109147
`;
110148
}
149+
firstUpdated() {
150+
console.log('FormInputElement.firstUpdated');
151+
console.log(this.#internals.form);
152+
}
111153
}
112154

113155
customElements.define('wc-form-input', FormInputElement);

‎src/component/form/FormPasswordElement.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
import { html } from 'lit';
3+
import { FormInputElement } from './FormInputElement.js';
4+
import icons from 'bootstrap-icons/bootstrap-icons.svg';
5+
6+
/**
7+
* FormPasswordElement
8+
*/
9+
export class FormPasswordElement extends FormInputElement {
10+
constructor() {
11+
super();
12+
}
13+
renderInput() {
14+
return html`
15+
<input type="password" class="input" name="${this.name}" value="${this.value}" ?required="${this.required}" placeholder="${this.placeholder}" ?disabled=${this.disabled} autocomplete="${this.autocomplete ? 'on' : 'off'}" pattern="${this.pattern}">
16+
<button><svg><use href="${icons}#eye"/></svg></button>
17+
</input>
18+
`;
19+
}
20+
}
21+
22+
customElements.define('wc-form-password', FormPasswordElement);

‎src/css/core.css‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
--font-size-small: 0.75rem;
77
--font-size-large: 1.25rem;
88
--font-weight-light: 300;
9-
--font-weight-normal: 300;
10-
--font-weight-bold: 400;
9+
--font-weight-normal: 400;
10+
--font-weight-bold: 600;
1111
--font-weight-extrabold: 800;
1212

1313
/* colours */
@@ -72,7 +72,7 @@
7272
--button-color-hover: var(--light-color);
7373
--button-color-active: var(--light-color);
7474
--button-color-disabled: var(--light-color);
75-
--button-font-weight: var(--font-weight-bold);
75+
--button-font-weight: var(--font-weight-normal);
7676
--button-font-weight-hover: var(--font-weight-bold);
7777
--button-font-weight-active: var(--font-weight-bold);
7878
--button-font-weight-disabled: var(--font-weight-bold);
@@ -155,16 +155,25 @@
155155

156156
/* forms */
157157
--form-input-background-color: none;
158-
--form-input-color: var(--dark-color);
158+
--form-input-color: red;
159159
--form-input-margin-y: calc(var(--spacer) * 0.1);
160160
--form-input-margin-x: 0;
161-
--form-input-padding-x: calc(var(--spacer) * 0.5);
162161
--form-input-padding-y: calc(var(--spacer) * 0.5);
162+
--form-input-padding-x: calc(var(--spacer) * 0.5);
163163
--form-input-font-size: var(--font-size-normal);
164164
--form-input-font-weight: var(--font-weight-normal);
165-
--form-input-line-height: 1;
165+
--form-input-line-height: 1.2;
166166
--form-input-border: 0.5px solid var(--control-color);
167167

168+
--form-label-background-color: none;
169+
--form-label-color: var(--dark-color);
170+
--form-label-padding-x: calc(var(--spacer) * 0.5);
171+
--form-label-padding-y: calc(var(--spacer) * 0.5);
172+
--form-label-font-size: var(--font-size-small);
173+
--form-label-font-weight: var(--font-weight-bold);
174+
--form-label-line-height: 1;
175+
--form-label-border: none;
176+
168177
--form-input-background-color-focus: none;
169178
--form-input-color-focus: var(--dark-color);
170179
--form-input-border-focus: 0.5px solid var(--dark-color);
@@ -174,13 +183,4 @@
174183
--form-checkbox-margin: calc(var(--spacer) * 0.5) 0;
175184
--form-checkbox-padding: 1 0;
176185
--form-checkbox-line-height: 1;
177-
178-
--form-label-background-color: none;
179-
--form-label-color: var(--dark-color);
180-
--form-label-padding: calc(var(--spacer) * 0.5) calc(var(--spacer) * 0.5);
181-
--form-label-font-size: var(--font-size-small);
182-
--form-label-font-weight: var(--font-weight-abold);
183-
--form-label-line-height: 1;
184-
--form-label-border: none;
185-
186186
}

‎src/index.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,16 +103,18 @@ <h1>Modal</h1>
103103
<hr>
104104

105105
<div class="container">
106-
<wc-form>
106+
<form>
107107
<h1>Form</h1>
108108
<wc-form-input name="name" placeholder="Enter your name" required labelabove>Name</wc-form-input>
109109
<wc-form-input name="email" placeholder="Enter your email (optional)" autocomplete labelabove>Email</wc-form-input>
110-
<wc-form-input name="address" placeholder="Enter your address" required labelabove>Address</wc-form-input>
110+
<wc-form-input name="address" placeholder="Enter your address" required labelabove rows="4">Address</wc-form-input>
111+
<wc-form-password name="password" placeholder="Enter a password" required>Password</wc-form-password>
112+
<wc-form-password name="password2" placeholder="Enter the password again" required>Password (Again)</wc-form-password>
111113
<wc-button-group>
112114
<wc-button name="save" submit>Save</wc-button>
113115
<wc-button name="cancel">Cancel</wc-button>
114116
</wc-button-group>
115-
</wc-form>
117+
</form>
116118
</div>
117119
<hr>
118120

‎src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import './component/modal/SideModalElement';
2424
// Form Elements
2525
import './component/form/FormElement';
2626
import './component/form/FormInputElement';
27+
import './component/form/FormPasswordElement';
2728

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

‎src/test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ window.addEventListener('load', () => {
2727
p.addEventListener(Event.EVENT_DONE, (evt) => {
2828
console.log("DONE", evt.detail);
2929
});
30-
p.fetch("/", {}, 5000);
30+
p.fetch("/", {});
3131

3232
// Buttons
3333
document.querySelectorAll('wc-button').forEach((button) => {

0 commit comments

Comments
 (0)