WIP PWA for Grain
feat: add grain-form-field molecule for consistent form layouts
+50
-9
-9
src/components/atoms/grain-textarea.js
-9
src/components/atoms/grain-textarea.js
···
31
31
outline: none;
32
32
border-color: var(--color-text-secondary);
33
33
}
34
-
.char-count {
35
-
font-size: var(--font-size-xs);
36
-
color: var(--color-text-secondary);
37
-
text-align: right;
38
-
margin-top: 4px;
39
-
}
40
34
`;
41
35
42
36
constructor() {
···
65
59
@input=${this.#handleInput}
66
60
maxlength=${this.maxlength || ''}
67
61
></textarea>
68
-
${this.maxlength ? html`
69
-
<div class="char-count">${this.value.length}/${this.maxlength}</div>
70
-
` : ''}
71
62
`;
72
63
}
73
64
}
+50
src/components/molecules/grain-form-field.js
+50
src/components/molecules/grain-form-field.js
···
1
+
import { LitElement, html, css } from 'lit';
2
+
3
+
export class GrainFormField extends LitElement {
4
+
static properties = {
5
+
label: { type: String },
6
+
value: { type: String },
7
+
maxlength: { type: Number }
8
+
};
9
+
10
+
static styles = css`
11
+
:host {
12
+
display: block;
13
+
margin-bottom: var(--space-md);
14
+
}
15
+
label {
16
+
display: block;
17
+
font-size: var(--font-size-sm);
18
+
font-weight: var(--font-weight-medium);
19
+
color: var(--color-text-primary);
20
+
margin-bottom: var(--space-xs);
21
+
}
22
+
.char-count {
23
+
font-size: var(--font-size-xs);
24
+
color: var(--color-text-secondary);
25
+
text-align: right;
26
+
margin-top: 4px;
27
+
}
28
+
`;
29
+
30
+
constructor() {
31
+
super();
32
+
this.label = '';
33
+
this.value = '';
34
+
this.maxlength = null;
35
+
}
36
+
37
+
render() {
38
+
const length = this.value?.length || 0;
39
+
40
+
return html`
41
+
${this.label ? html`<label>${this.label}</label>` : ''}
42
+
<slot></slot>
43
+
${this.maxlength ? html`
44
+
<div class="char-count">${length}/${this.maxlength}</div>
45
+
` : ''}
46
+
`;
47
+
}
48
+
}
49
+
50
+
customElements.define('grain-form-field', GrainFormField);