@mfp-design-system/input 0.1.0 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -2
- package/dist/input.d.ts +12 -0
- package/dist/input.d.ts.map +1 -1
- package/dist/input.js +70 -34
- package/dist/input.js.map +1 -1
- package/package.json +3 -3
- package/src/input.ts +49 -1
package/README.md
CHANGED
|
@@ -83,6 +83,18 @@ mfp-input::part(label) {
|
|
|
83
83
|
- **Angular**: add `CUSTOM_ELEMENTS_SCHEMA` to modules using the component
|
|
84
84
|
- **React 19+**: works natively
|
|
85
85
|
|
|
86
|
-
##
|
|
86
|
+
## Forms
|
|
87
87
|
|
|
88
|
-
-
|
|
88
|
+
`<mfp-input>` is form-associated via `ElementInternals`:
|
|
89
|
+
|
|
90
|
+
- Its `value` is submitted with the form under the configured `name`
|
|
91
|
+
- `required` triggers native `valueMissing` validation
|
|
92
|
+
- `error` (when set) becomes a custom validity message
|
|
93
|
+
- `checkValidity()` and `reportValidity()` mirror the native HTMLInputElement methods
|
|
94
|
+
|
|
95
|
+
```html
|
|
96
|
+
<form @submit.prevent="onSubmit">
|
|
97
|
+
<mfp-input name="email" type="email" required label="Email"></mfp-input>
|
|
98
|
+
<mfp-button type="submit">Submit</mfp-button>
|
|
99
|
+
</form>
|
|
100
|
+
```
|
package/dist/input.d.ts
CHANGED
|
@@ -14,7 +14,19 @@ export declare class MfpInput extends LitElement {
|
|
|
14
14
|
disabled: boolean;
|
|
15
15
|
readonly: boolean;
|
|
16
16
|
required: boolean;
|
|
17
|
+
static formAssociated: boolean;
|
|
18
|
+
private _internals;
|
|
19
|
+
constructor();
|
|
20
|
+
/** The associated <form>, if any. */
|
|
21
|
+
get form(): HTMLFormElement | null;
|
|
22
|
+
/** Run native HTML validation. Mirrors HTMLInputElement.checkValidity(). */
|
|
23
|
+
checkValidity(): boolean;
|
|
24
|
+
/** Run validation and show validity UI. */
|
|
25
|
+
reportValidity(): boolean;
|
|
17
26
|
private _id;
|
|
27
|
+
private _syncFormValue;
|
|
28
|
+
willUpdate(changed: Map<string, unknown>): void;
|
|
29
|
+
connectedCallback(): void;
|
|
18
30
|
private _onInput;
|
|
19
31
|
private _onChange;
|
|
20
32
|
render(): import("lit").TemplateResult<1>;
|
package/dist/input.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../src/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;AAI5F,qBACa,QAAS,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BA0HpB;IAGF,IAAI,EAAE,SAAS,CAAQ;IAGvB,IAAI,EAAE,SAAS,CAAU;IAGzB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,OAAO,CAAC,GAAG,CAAmC;IAE9C,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,SAAS,CAUf;IAEO,MAAM;CA0ClB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ"}
|
|
1
|
+
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../src/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;AAI5F,qBACa,QAAS,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BA0HpB;IAGF,IAAI,EAAE,SAAS,CAAQ;IAGvB,IAAI,EAAE,SAAS,CAAU;IAGzB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAO,CAAC,UAAU,CAAmB;;IAOrC,qCAAqC;IACrC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,4EAA4E;IAC5E,aAAa,IAAI,OAAO;IAIxB,2CAA2C;IAC3C,cAAc,IAAI,OAAO;IAIzB,OAAO,CAAC,GAAG,CAAmC;IAE9C,OAAO,CAAC,cAAc;IAab,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMxC,iBAAiB;IAK1B,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,SAAS,CAUf;IAEO,MAAM;CA0ClB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ"}
|
package/dist/input.js
CHANGED
|
@@ -8,39 +8,6 @@ import { LitElement, html, css, nothing } from 'lit';
|
|
|
8
8
|
import { customElement, property } from 'lit/decorators.js';
|
|
9
9
|
let inputIdCounter = 0;
|
|
10
10
|
let MfpInput = class MfpInput extends LitElement {
|
|
11
|
-
constructor() {
|
|
12
|
-
super(...arguments);
|
|
13
|
-
this.size = 'md';
|
|
14
|
-
this.type = 'text';
|
|
15
|
-
this.value = '';
|
|
16
|
-
this.name = '';
|
|
17
|
-
this.label = '';
|
|
18
|
-
this.placeholder = '';
|
|
19
|
-
this.hint = '';
|
|
20
|
-
this.error = '';
|
|
21
|
-
this.disabled = false;
|
|
22
|
-
this.readonly = false;
|
|
23
|
-
this.required = false;
|
|
24
|
-
this._id = `mfp-input-${++inputIdCounter}`;
|
|
25
|
-
this._onInput = (e) => {
|
|
26
|
-
const input = e.target;
|
|
27
|
-
this.value = input.value;
|
|
28
|
-
this.dispatchEvent(new CustomEvent('input', {
|
|
29
|
-
bubbles: true,
|
|
30
|
-
composed: true,
|
|
31
|
-
detail: { value: input.value },
|
|
32
|
-
}));
|
|
33
|
-
};
|
|
34
|
-
this._onChange = (e) => {
|
|
35
|
-
const input = e.target;
|
|
36
|
-
this.value = input.value;
|
|
37
|
-
this.dispatchEvent(new CustomEvent('change', {
|
|
38
|
-
bubbles: true,
|
|
39
|
-
composed: true,
|
|
40
|
-
detail: { value: input.value },
|
|
41
|
-
}));
|
|
42
|
-
};
|
|
43
|
-
}
|
|
44
11
|
static { this.styles = css `
|
|
45
12
|
:host {
|
|
46
13
|
display: block;
|
|
@@ -78,7 +45,7 @@ let MfpInput = class MfpInput extends LitElement {
|
|
|
78
45
|
}
|
|
79
46
|
|
|
80
47
|
.control:focus-within {
|
|
81
|
-
border-color: var(--color-
|
|
48
|
+
border-color: var(--color-brand-primary, #2563eb);
|
|
82
49
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
|
|
83
50
|
}
|
|
84
51
|
|
|
@@ -164,6 +131,75 @@ let MfpInput = class MfpInput extends LitElement {
|
|
|
164
131
|
}
|
|
165
132
|
}
|
|
166
133
|
`; }
|
|
134
|
+
static { this.formAssociated = true; }
|
|
135
|
+
constructor() {
|
|
136
|
+
super();
|
|
137
|
+
this.size = 'md';
|
|
138
|
+
this.type = 'text';
|
|
139
|
+
this.value = '';
|
|
140
|
+
this.name = '';
|
|
141
|
+
this.label = '';
|
|
142
|
+
this.placeholder = '';
|
|
143
|
+
this.hint = '';
|
|
144
|
+
this.error = '';
|
|
145
|
+
this.disabled = false;
|
|
146
|
+
this.readonly = false;
|
|
147
|
+
this.required = false;
|
|
148
|
+
this._id = `mfp-input-${++inputIdCounter}`;
|
|
149
|
+
this._onInput = (e) => {
|
|
150
|
+
const input = e.target;
|
|
151
|
+
this.value = input.value;
|
|
152
|
+
this.dispatchEvent(new CustomEvent('input', {
|
|
153
|
+
bubbles: true,
|
|
154
|
+
composed: true,
|
|
155
|
+
detail: { value: input.value },
|
|
156
|
+
}));
|
|
157
|
+
};
|
|
158
|
+
this._onChange = (e) => {
|
|
159
|
+
const input = e.target;
|
|
160
|
+
this.value = input.value;
|
|
161
|
+
this.dispatchEvent(new CustomEvent('change', {
|
|
162
|
+
bubbles: true,
|
|
163
|
+
composed: true,
|
|
164
|
+
detail: { value: input.value },
|
|
165
|
+
}));
|
|
166
|
+
};
|
|
167
|
+
this._internals = this.attachInternals();
|
|
168
|
+
}
|
|
169
|
+
/** The associated <form>, if any. */
|
|
170
|
+
get form() {
|
|
171
|
+
return this._internals.form;
|
|
172
|
+
}
|
|
173
|
+
/** Run native HTML validation. Mirrors HTMLInputElement.checkValidity(). */
|
|
174
|
+
checkValidity() {
|
|
175
|
+
return this._internals.checkValidity();
|
|
176
|
+
}
|
|
177
|
+
/** Run validation and show validity UI. */
|
|
178
|
+
reportValidity() {
|
|
179
|
+
return this._internals.reportValidity();
|
|
180
|
+
}
|
|
181
|
+
_syncFormValue() {
|
|
182
|
+
this._internals.setFormValue(this.value);
|
|
183
|
+
// Validity: explicit error wins; otherwise enforce required.
|
|
184
|
+
if (this.error) {
|
|
185
|
+
this._internals.setValidity({ customError: true }, this.error);
|
|
186
|
+
}
|
|
187
|
+
else if (this.required && !this.value) {
|
|
188
|
+
this._internals.setValidity({ valueMissing: true }, 'Please fill out this field.');
|
|
189
|
+
}
|
|
190
|
+
else {
|
|
191
|
+
this._internals.setValidity({});
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
willUpdate(changed) {
|
|
195
|
+
if (changed.has('value') || changed.has('required') || changed.has('error')) {
|
|
196
|
+
this._syncFormValue();
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
connectedCallback() {
|
|
200
|
+
super.connectedCallback();
|
|
201
|
+
this._syncFormValue();
|
|
202
|
+
}
|
|
167
203
|
render() {
|
|
168
204
|
const invalid = this.error.length > 0;
|
|
169
205
|
const inputId = this._id;
|
package/dist/input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","sourceRoot":"","sources":["../src/input.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK5D,IAAI,cAAc,GAAG,CAAC,CAAC;AAGhB,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"input.js","sourceRoot":"","sources":["../src/input.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mfp-design-system/input",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "Input web component for the mfp-design-system, built with Lit.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"lit": "^3.2.1"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"@mfp-design-system/tokens": "^0.
|
|
28
|
+
"@mfp-design-system/tokens": "^0.3.0"
|
|
29
29
|
},
|
|
30
30
|
"peerDependenciesMeta": {
|
|
31
31
|
"@mfp-design-system/tokens": {
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"rimraf": "^6.0.1",
|
|
37
37
|
"typescript": "^5.6.3",
|
|
38
|
-
"@mfp-design-system/tokens": "0.
|
|
38
|
+
"@mfp-design-system/tokens": "0.3.0"
|
|
39
39
|
},
|
|
40
40
|
"publishConfig": {
|
|
41
41
|
"access": "public"
|
package/src/input.ts
CHANGED
|
@@ -45,7 +45,7 @@ export class MfpInput extends LitElement {
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.control:focus-within {
|
|
48
|
-
border-color: var(--color-
|
|
48
|
+
border-color: var(--color-brand-primary, #2563eb);
|
|
49
49
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
|
|
50
50
|
}
|
|
51
51
|
|
|
@@ -165,8 +165,56 @@ export class MfpInput extends LitElement {
|
|
|
165
165
|
@property({ type: Boolean, reflect: true })
|
|
166
166
|
required = false;
|
|
167
167
|
|
|
168
|
+
static formAssociated = true;
|
|
169
|
+
|
|
170
|
+
private _internals: ElementInternals;
|
|
171
|
+
|
|
172
|
+
constructor() {
|
|
173
|
+
super();
|
|
174
|
+
this._internals = this.attachInternals();
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
/** The associated <form>, if any. */
|
|
178
|
+
get form(): HTMLFormElement | null {
|
|
179
|
+
return this._internals.form;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/** Run native HTML validation. Mirrors HTMLInputElement.checkValidity(). */
|
|
183
|
+
checkValidity(): boolean {
|
|
184
|
+
return this._internals.checkValidity();
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/** Run validation and show validity UI. */
|
|
188
|
+
reportValidity(): boolean {
|
|
189
|
+
return this._internals.reportValidity();
|
|
190
|
+
}
|
|
191
|
+
|
|
168
192
|
private _id = `mfp-input-${++inputIdCounter}`;
|
|
169
193
|
|
|
194
|
+
private _syncFormValue() {
|
|
195
|
+
this._internals.setFormValue(this.value);
|
|
196
|
+
|
|
197
|
+
// Validity: explicit error wins; otherwise enforce required.
|
|
198
|
+
if (this.error) {
|
|
199
|
+
this._internals.setValidity({ customError: true }, this.error);
|
|
200
|
+
} else if (this.required && !this.value) {
|
|
201
|
+
this._internals.setValidity({ valueMissing: true }, 'Please fill out this field.');
|
|
202
|
+
} else {
|
|
203
|
+
this._internals.setValidity({});
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
override willUpdate(changed: Map<string, unknown>) {
|
|
208
|
+
if (changed.has('value') || changed.has('required') || changed.has('error')) {
|
|
209
|
+
this._syncFormValue();
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
override connectedCallback() {
|
|
214
|
+
super.connectedCallback();
|
|
215
|
+
this._syncFormValue();
|
|
216
|
+
}
|
|
217
|
+
|
|
170
218
|
private _onInput = (e: Event) => {
|
|
171
219
|
const input = e.target as HTMLInputElement;
|
|
172
220
|
this.value = input.value;
|