@sekiui/elements 0.0.23 → 0.0.25
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 +10 -257
- package/dist/cjs/{index-6jIfEFyf.js → index-B1pILoQg.js} +61 -2
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/seki-button.cjs.entry.js +23 -3
- package/dist/cjs/seki-input.cjs.entry.js +66 -0
- package/dist/cjs/sekiui.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/button/seki-button.css +85 -7
- package/dist/collection/components/button/seki-button.js +48 -9
- package/dist/collection/components/input/seki-input.css +446 -0
- package/dist/collection/components/input/seki-input.js +503 -0
- package/dist/components/index.js +65 -3
- package/dist/components/seki-button.js +24 -3
- package/dist/components/seki-input.d.ts +11 -0
- package/dist/components/seki-input.js +104 -0
- package/dist/esm/{index-BROrRAlq.js → index-CLC2YwJ6.js} +61 -3
- package/dist/esm/loader.js +3 -3
- package/dist/esm/seki-button.entry.js +23 -3
- package/dist/esm/seki-input.entry.js +64 -0
- package/dist/esm/sekiui.js +3 -3
- package/dist/sekiui/p-10c9b8b2.entry.js +1 -0
- package/dist/sekiui/p-6573bc92.entry.js +1 -0
- package/dist/sekiui/p-CLC2YwJ6.js +2 -0
- package/dist/sekiui/sekiui.esm.js +1 -1
- package/dist/types/components/button/seki-button.d.ts +19 -2
- package/dist/types/components/input/seki-input.d.ts +107 -0
- package/dist/types/components.d.ts +227 -4
- package/package.json +1 -1
- package/dist/sekiui/p-1b1b0f6c.entry.js +0 -1
- package/dist/sekiui/p-BROrRAlq.js +0 -2
|
@@ -0,0 +1,503 @@
|
|
|
1
|
+
import { h } from "@stencil/core";
|
|
2
|
+
export class SekiInput {
|
|
3
|
+
constructor() {
|
|
4
|
+
/**
|
|
5
|
+
* Input type (text, email, password, number, tel, url, date, file, etc.)
|
|
6
|
+
*/
|
|
7
|
+
this.type = 'text';
|
|
8
|
+
/**
|
|
9
|
+
* Current value of the input
|
|
10
|
+
*/
|
|
11
|
+
this.value = '';
|
|
12
|
+
/**
|
|
13
|
+
* Whether the input is disabled
|
|
14
|
+
*/
|
|
15
|
+
this.disabled = false;
|
|
16
|
+
/**
|
|
17
|
+
* Whether the input is readonly
|
|
18
|
+
*/
|
|
19
|
+
this.readonly = false;
|
|
20
|
+
/**
|
|
21
|
+
* Whether the input is required
|
|
22
|
+
*/
|
|
23
|
+
this.required = false;
|
|
24
|
+
/**
|
|
25
|
+
* Size variant
|
|
26
|
+
*/
|
|
27
|
+
this.size = 'md';
|
|
28
|
+
/**
|
|
29
|
+
* Whether the input is in an invalid/error state
|
|
30
|
+
*/
|
|
31
|
+
this.invalid = false;
|
|
32
|
+
this.handleInput = (event) => {
|
|
33
|
+
const target = event.target;
|
|
34
|
+
this.value = target.value;
|
|
35
|
+
this.sekiInput.emit({ value: this.value, nativeEvent: event });
|
|
36
|
+
};
|
|
37
|
+
this.handleChange = (event) => {
|
|
38
|
+
const target = event.target;
|
|
39
|
+
this.value = target.value;
|
|
40
|
+
this.sekiChange.emit({ value: this.value, nativeEvent: event });
|
|
41
|
+
};
|
|
42
|
+
this.handleFocus = (event) => {
|
|
43
|
+
this.sekiFocus.emit({ nativeEvent: event });
|
|
44
|
+
};
|
|
45
|
+
this.handleBlur = (event) => {
|
|
46
|
+
const target = event.target;
|
|
47
|
+
this.sekiBlur.emit({ value: target.value, nativeEvent: event });
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
render() {
|
|
51
|
+
return (h("input", { key: 'ee1a78a2e143eabec329263670723cee7fa5bd86', type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
|
|
52
|
+
}
|
|
53
|
+
static get is() { return "seki-input"; }
|
|
54
|
+
static get encapsulation() { return "shadow"; }
|
|
55
|
+
static get originalStyleUrls() {
|
|
56
|
+
return {
|
|
57
|
+
"$": ["seki-input.css"]
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
static get styleUrls() {
|
|
61
|
+
return {
|
|
62
|
+
"$": ["seki-input.css"]
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
static get properties() {
|
|
66
|
+
return {
|
|
67
|
+
"type": {
|
|
68
|
+
"type": "string",
|
|
69
|
+
"mutable": false,
|
|
70
|
+
"complexType": {
|
|
71
|
+
"original": "string",
|
|
72
|
+
"resolved": "string",
|
|
73
|
+
"references": {}
|
|
74
|
+
},
|
|
75
|
+
"required": false,
|
|
76
|
+
"optional": false,
|
|
77
|
+
"docs": {
|
|
78
|
+
"tags": [],
|
|
79
|
+
"text": "Input type (text, email, password, number, tel, url, date, file, etc.)"
|
|
80
|
+
},
|
|
81
|
+
"getter": false,
|
|
82
|
+
"setter": false,
|
|
83
|
+
"reflect": false,
|
|
84
|
+
"attribute": "type",
|
|
85
|
+
"defaultValue": "'text'"
|
|
86
|
+
},
|
|
87
|
+
"value": {
|
|
88
|
+
"type": "string",
|
|
89
|
+
"mutable": true,
|
|
90
|
+
"complexType": {
|
|
91
|
+
"original": "string",
|
|
92
|
+
"resolved": "string | undefined",
|
|
93
|
+
"references": {}
|
|
94
|
+
},
|
|
95
|
+
"required": false,
|
|
96
|
+
"optional": true,
|
|
97
|
+
"docs": {
|
|
98
|
+
"tags": [],
|
|
99
|
+
"text": "Current value of the input"
|
|
100
|
+
},
|
|
101
|
+
"getter": false,
|
|
102
|
+
"setter": false,
|
|
103
|
+
"reflect": true,
|
|
104
|
+
"attribute": "value",
|
|
105
|
+
"defaultValue": "''"
|
|
106
|
+
},
|
|
107
|
+
"placeholder": {
|
|
108
|
+
"type": "string",
|
|
109
|
+
"mutable": false,
|
|
110
|
+
"complexType": {
|
|
111
|
+
"original": "string",
|
|
112
|
+
"resolved": "string | undefined",
|
|
113
|
+
"references": {}
|
|
114
|
+
},
|
|
115
|
+
"required": false,
|
|
116
|
+
"optional": true,
|
|
117
|
+
"docs": {
|
|
118
|
+
"tags": [],
|
|
119
|
+
"text": "Placeholder text"
|
|
120
|
+
},
|
|
121
|
+
"getter": false,
|
|
122
|
+
"setter": false,
|
|
123
|
+
"reflect": false,
|
|
124
|
+
"attribute": "placeholder"
|
|
125
|
+
},
|
|
126
|
+
"disabled": {
|
|
127
|
+
"type": "boolean",
|
|
128
|
+
"mutable": false,
|
|
129
|
+
"complexType": {
|
|
130
|
+
"original": "boolean",
|
|
131
|
+
"resolved": "boolean",
|
|
132
|
+
"references": {}
|
|
133
|
+
},
|
|
134
|
+
"required": false,
|
|
135
|
+
"optional": false,
|
|
136
|
+
"docs": {
|
|
137
|
+
"tags": [],
|
|
138
|
+
"text": "Whether the input is disabled"
|
|
139
|
+
},
|
|
140
|
+
"getter": false,
|
|
141
|
+
"setter": false,
|
|
142
|
+
"reflect": false,
|
|
143
|
+
"attribute": "disabled",
|
|
144
|
+
"defaultValue": "false"
|
|
145
|
+
},
|
|
146
|
+
"readonly": {
|
|
147
|
+
"type": "boolean",
|
|
148
|
+
"mutable": false,
|
|
149
|
+
"complexType": {
|
|
150
|
+
"original": "boolean",
|
|
151
|
+
"resolved": "boolean",
|
|
152
|
+
"references": {}
|
|
153
|
+
},
|
|
154
|
+
"required": false,
|
|
155
|
+
"optional": false,
|
|
156
|
+
"docs": {
|
|
157
|
+
"tags": [],
|
|
158
|
+
"text": "Whether the input is readonly"
|
|
159
|
+
},
|
|
160
|
+
"getter": false,
|
|
161
|
+
"setter": false,
|
|
162
|
+
"reflect": false,
|
|
163
|
+
"attribute": "readonly",
|
|
164
|
+
"defaultValue": "false"
|
|
165
|
+
},
|
|
166
|
+
"required": {
|
|
167
|
+
"type": "boolean",
|
|
168
|
+
"mutable": false,
|
|
169
|
+
"complexType": {
|
|
170
|
+
"original": "boolean",
|
|
171
|
+
"resolved": "boolean",
|
|
172
|
+
"references": {}
|
|
173
|
+
},
|
|
174
|
+
"required": false,
|
|
175
|
+
"optional": false,
|
|
176
|
+
"docs": {
|
|
177
|
+
"tags": [],
|
|
178
|
+
"text": "Whether the input is required"
|
|
179
|
+
},
|
|
180
|
+
"getter": false,
|
|
181
|
+
"setter": false,
|
|
182
|
+
"reflect": false,
|
|
183
|
+
"attribute": "required",
|
|
184
|
+
"defaultValue": "false"
|
|
185
|
+
},
|
|
186
|
+
"name": {
|
|
187
|
+
"type": "string",
|
|
188
|
+
"mutable": false,
|
|
189
|
+
"complexType": {
|
|
190
|
+
"original": "string",
|
|
191
|
+
"resolved": "string | undefined",
|
|
192
|
+
"references": {}
|
|
193
|
+
},
|
|
194
|
+
"required": false,
|
|
195
|
+
"optional": true,
|
|
196
|
+
"docs": {
|
|
197
|
+
"tags": [],
|
|
198
|
+
"text": "Name attribute for form submission"
|
|
199
|
+
},
|
|
200
|
+
"getter": false,
|
|
201
|
+
"setter": false,
|
|
202
|
+
"reflect": false,
|
|
203
|
+
"attribute": "name"
|
|
204
|
+
},
|
|
205
|
+
"autocomplete": {
|
|
206
|
+
"type": "string",
|
|
207
|
+
"mutable": false,
|
|
208
|
+
"complexType": {
|
|
209
|
+
"original": "string",
|
|
210
|
+
"resolved": "string | undefined",
|
|
211
|
+
"references": {}
|
|
212
|
+
},
|
|
213
|
+
"required": false,
|
|
214
|
+
"optional": true,
|
|
215
|
+
"docs": {
|
|
216
|
+
"tags": [],
|
|
217
|
+
"text": "Autocomplete attribute"
|
|
218
|
+
},
|
|
219
|
+
"getter": false,
|
|
220
|
+
"setter": false,
|
|
221
|
+
"reflect": false,
|
|
222
|
+
"attribute": "autocomplete"
|
|
223
|
+
},
|
|
224
|
+
"min": {
|
|
225
|
+
"type": "any",
|
|
226
|
+
"mutable": false,
|
|
227
|
+
"complexType": {
|
|
228
|
+
"original": "string | number",
|
|
229
|
+
"resolved": "number | string | undefined",
|
|
230
|
+
"references": {}
|
|
231
|
+
},
|
|
232
|
+
"required": false,
|
|
233
|
+
"optional": true,
|
|
234
|
+
"docs": {
|
|
235
|
+
"tags": [],
|
|
236
|
+
"text": "Minimum value (for number/date inputs)"
|
|
237
|
+
},
|
|
238
|
+
"getter": false,
|
|
239
|
+
"setter": false,
|
|
240
|
+
"reflect": false,
|
|
241
|
+
"attribute": "min"
|
|
242
|
+
},
|
|
243
|
+
"max": {
|
|
244
|
+
"type": "any",
|
|
245
|
+
"mutable": false,
|
|
246
|
+
"complexType": {
|
|
247
|
+
"original": "string | number",
|
|
248
|
+
"resolved": "number | string | undefined",
|
|
249
|
+
"references": {}
|
|
250
|
+
},
|
|
251
|
+
"required": false,
|
|
252
|
+
"optional": true,
|
|
253
|
+
"docs": {
|
|
254
|
+
"tags": [],
|
|
255
|
+
"text": "Maximum value (for number/date inputs)"
|
|
256
|
+
},
|
|
257
|
+
"getter": false,
|
|
258
|
+
"setter": false,
|
|
259
|
+
"reflect": false,
|
|
260
|
+
"attribute": "max"
|
|
261
|
+
},
|
|
262
|
+
"step": {
|
|
263
|
+
"type": "any",
|
|
264
|
+
"mutable": false,
|
|
265
|
+
"complexType": {
|
|
266
|
+
"original": "string | number",
|
|
267
|
+
"resolved": "number | string | undefined",
|
|
268
|
+
"references": {}
|
|
269
|
+
},
|
|
270
|
+
"required": false,
|
|
271
|
+
"optional": true,
|
|
272
|
+
"docs": {
|
|
273
|
+
"tags": [],
|
|
274
|
+
"text": "Step value (for number inputs)"
|
|
275
|
+
},
|
|
276
|
+
"getter": false,
|
|
277
|
+
"setter": false,
|
|
278
|
+
"reflect": false,
|
|
279
|
+
"attribute": "step"
|
|
280
|
+
},
|
|
281
|
+
"pattern": {
|
|
282
|
+
"type": "string",
|
|
283
|
+
"mutable": false,
|
|
284
|
+
"complexType": {
|
|
285
|
+
"original": "string",
|
|
286
|
+
"resolved": "string | undefined",
|
|
287
|
+
"references": {}
|
|
288
|
+
},
|
|
289
|
+
"required": false,
|
|
290
|
+
"optional": true,
|
|
291
|
+
"docs": {
|
|
292
|
+
"tags": [],
|
|
293
|
+
"text": "Validation pattern (regex)"
|
|
294
|
+
},
|
|
295
|
+
"getter": false,
|
|
296
|
+
"setter": false,
|
|
297
|
+
"reflect": false,
|
|
298
|
+
"attribute": "pattern"
|
|
299
|
+
},
|
|
300
|
+
"minlength": {
|
|
301
|
+
"type": "number",
|
|
302
|
+
"mutable": false,
|
|
303
|
+
"complexType": {
|
|
304
|
+
"original": "number",
|
|
305
|
+
"resolved": "number | undefined",
|
|
306
|
+
"references": {}
|
|
307
|
+
},
|
|
308
|
+
"required": false,
|
|
309
|
+
"optional": true,
|
|
310
|
+
"docs": {
|
|
311
|
+
"tags": [],
|
|
312
|
+
"text": "Minimum length"
|
|
313
|
+
},
|
|
314
|
+
"getter": false,
|
|
315
|
+
"setter": false,
|
|
316
|
+
"reflect": false,
|
|
317
|
+
"attribute": "minlength"
|
|
318
|
+
},
|
|
319
|
+
"maxlength": {
|
|
320
|
+
"type": "number",
|
|
321
|
+
"mutable": false,
|
|
322
|
+
"complexType": {
|
|
323
|
+
"original": "number",
|
|
324
|
+
"resolved": "number | undefined",
|
|
325
|
+
"references": {}
|
|
326
|
+
},
|
|
327
|
+
"required": false,
|
|
328
|
+
"optional": true,
|
|
329
|
+
"docs": {
|
|
330
|
+
"tags": [],
|
|
331
|
+
"text": "Maximum length"
|
|
332
|
+
},
|
|
333
|
+
"getter": false,
|
|
334
|
+
"setter": false,
|
|
335
|
+
"reflect": false,
|
|
336
|
+
"attribute": "maxlength"
|
|
337
|
+
},
|
|
338
|
+
"size": {
|
|
339
|
+
"type": "string",
|
|
340
|
+
"mutable": false,
|
|
341
|
+
"complexType": {
|
|
342
|
+
"original": "'sm' | 'md' | 'lg'",
|
|
343
|
+
"resolved": "\"lg\" | \"md\" | \"sm\"",
|
|
344
|
+
"references": {}
|
|
345
|
+
},
|
|
346
|
+
"required": false,
|
|
347
|
+
"optional": false,
|
|
348
|
+
"docs": {
|
|
349
|
+
"tags": [],
|
|
350
|
+
"text": "Size variant"
|
|
351
|
+
},
|
|
352
|
+
"getter": false,
|
|
353
|
+
"setter": false,
|
|
354
|
+
"reflect": false,
|
|
355
|
+
"attribute": "size",
|
|
356
|
+
"defaultValue": "'md'"
|
|
357
|
+
},
|
|
358
|
+
"invalid": {
|
|
359
|
+
"type": "boolean",
|
|
360
|
+
"mutable": false,
|
|
361
|
+
"complexType": {
|
|
362
|
+
"original": "boolean",
|
|
363
|
+
"resolved": "boolean",
|
|
364
|
+
"references": {}
|
|
365
|
+
},
|
|
366
|
+
"required": false,
|
|
367
|
+
"optional": false,
|
|
368
|
+
"docs": {
|
|
369
|
+
"tags": [],
|
|
370
|
+
"text": "Whether the input is in an invalid/error state"
|
|
371
|
+
},
|
|
372
|
+
"getter": false,
|
|
373
|
+
"setter": false,
|
|
374
|
+
"reflect": false,
|
|
375
|
+
"attribute": "invalid",
|
|
376
|
+
"defaultValue": "false"
|
|
377
|
+
},
|
|
378
|
+
"ariaLabel": {
|
|
379
|
+
"type": "string",
|
|
380
|
+
"mutable": false,
|
|
381
|
+
"complexType": {
|
|
382
|
+
"original": "string",
|
|
383
|
+
"resolved": "string | undefined",
|
|
384
|
+
"references": {}
|
|
385
|
+
},
|
|
386
|
+
"required": false,
|
|
387
|
+
"optional": true,
|
|
388
|
+
"docs": {
|
|
389
|
+
"tags": [],
|
|
390
|
+
"text": "Accessible label for screen readers"
|
|
391
|
+
},
|
|
392
|
+
"getter": false,
|
|
393
|
+
"setter": false,
|
|
394
|
+
"reflect": false,
|
|
395
|
+
"attribute": "aria-label"
|
|
396
|
+
},
|
|
397
|
+
"ariaDescribedby": {
|
|
398
|
+
"type": "string",
|
|
399
|
+
"mutable": false,
|
|
400
|
+
"complexType": {
|
|
401
|
+
"original": "string",
|
|
402
|
+
"resolved": "string | undefined",
|
|
403
|
+
"references": {}
|
|
404
|
+
},
|
|
405
|
+
"required": false,
|
|
406
|
+
"optional": true,
|
|
407
|
+
"docs": {
|
|
408
|
+
"tags": [],
|
|
409
|
+
"text": "ID of element describing this input"
|
|
410
|
+
},
|
|
411
|
+
"getter": false,
|
|
412
|
+
"setter": false,
|
|
413
|
+
"reflect": false,
|
|
414
|
+
"attribute": "aria-describedby"
|
|
415
|
+
}
|
|
416
|
+
};
|
|
417
|
+
}
|
|
418
|
+
static get events() {
|
|
419
|
+
return [{
|
|
420
|
+
"method": "sekiInput",
|
|
421
|
+
"name": "sekiInput",
|
|
422
|
+
"bubbles": true,
|
|
423
|
+
"cancelable": true,
|
|
424
|
+
"composed": true,
|
|
425
|
+
"docs": {
|
|
426
|
+
"tags": [],
|
|
427
|
+
"text": "Emitted on every keystroke"
|
|
428
|
+
},
|
|
429
|
+
"complexType": {
|
|
430
|
+
"original": "{ value: string; nativeEvent: Event }",
|
|
431
|
+
"resolved": "{ value: string; nativeEvent: Event; }",
|
|
432
|
+
"references": {
|
|
433
|
+
"Event": {
|
|
434
|
+
"location": "import",
|
|
435
|
+
"path": "@stencil/core",
|
|
436
|
+
"id": "node_modules::Event"
|
|
437
|
+
}
|
|
438
|
+
}
|
|
439
|
+
}
|
|
440
|
+
}, {
|
|
441
|
+
"method": "sekiChange",
|
|
442
|
+
"name": "sekiChange",
|
|
443
|
+
"bubbles": true,
|
|
444
|
+
"cancelable": true,
|
|
445
|
+
"composed": true,
|
|
446
|
+
"docs": {
|
|
447
|
+
"tags": [],
|
|
448
|
+
"text": "Emitted on blur or Enter"
|
|
449
|
+
},
|
|
450
|
+
"complexType": {
|
|
451
|
+
"original": "{ value: string; nativeEvent: Event }",
|
|
452
|
+
"resolved": "{ value: string; nativeEvent: Event; }",
|
|
453
|
+
"references": {
|
|
454
|
+
"Event": {
|
|
455
|
+
"location": "import",
|
|
456
|
+
"path": "@stencil/core",
|
|
457
|
+
"id": "node_modules::Event"
|
|
458
|
+
}
|
|
459
|
+
}
|
|
460
|
+
}
|
|
461
|
+
}, {
|
|
462
|
+
"method": "sekiFocus",
|
|
463
|
+
"name": "sekiFocus",
|
|
464
|
+
"bubbles": true,
|
|
465
|
+
"cancelable": true,
|
|
466
|
+
"composed": true,
|
|
467
|
+
"docs": {
|
|
468
|
+
"tags": [],
|
|
469
|
+
"text": "Emitted on focus"
|
|
470
|
+
},
|
|
471
|
+
"complexType": {
|
|
472
|
+
"original": "{ nativeEvent: FocusEvent }",
|
|
473
|
+
"resolved": "{ nativeEvent: FocusEvent; }",
|
|
474
|
+
"references": {
|
|
475
|
+
"FocusEvent": {
|
|
476
|
+
"location": "global",
|
|
477
|
+
"id": "global::FocusEvent"
|
|
478
|
+
}
|
|
479
|
+
}
|
|
480
|
+
}
|
|
481
|
+
}, {
|
|
482
|
+
"method": "sekiBlur",
|
|
483
|
+
"name": "sekiBlur",
|
|
484
|
+
"bubbles": true,
|
|
485
|
+
"cancelable": true,
|
|
486
|
+
"composed": true,
|
|
487
|
+
"docs": {
|
|
488
|
+
"tags": [],
|
|
489
|
+
"text": "Emitted on blur"
|
|
490
|
+
},
|
|
491
|
+
"complexType": {
|
|
492
|
+
"original": "{ value: string; nativeEvent: FocusEvent }",
|
|
493
|
+
"resolved": "{ value: string; nativeEvent: FocusEvent; }",
|
|
494
|
+
"references": {
|
|
495
|
+
"FocusEvent": {
|
|
496
|
+
"location": "global",
|
|
497
|
+
"id": "global::FocusEvent"
|
|
498
|
+
}
|
|
499
|
+
}
|
|
500
|
+
}
|
|
501
|
+
}];
|
|
502
|
+
}
|
|
503
|
+
}
|
package/dist/components/index.js
CHANGED
|
@@ -382,6 +382,9 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
|
|
|
382
382
|
return propValue === "false" ? false : propValue === "" || !!propValue;
|
|
383
383
|
}
|
|
384
384
|
}
|
|
385
|
+
if (propType & 2 /* Number */) {
|
|
386
|
+
return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
|
|
387
|
+
}
|
|
385
388
|
if (propType & 1 /* String */) {
|
|
386
389
|
return String(propValue);
|
|
387
390
|
}
|
|
@@ -389,6 +392,24 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
|
|
|
389
392
|
}
|
|
390
393
|
return propValue;
|
|
391
394
|
};
|
|
395
|
+
var getElement = (ref) => {
|
|
396
|
+
return ref;
|
|
397
|
+
};
|
|
398
|
+
|
|
399
|
+
// src/runtime/event-emitter.ts
|
|
400
|
+
var createEvent = (ref, name, flags) => {
|
|
401
|
+
const elm = getElement(ref);
|
|
402
|
+
return {
|
|
403
|
+
emit: (detail) => {
|
|
404
|
+
return emitEvent(elm, name, {
|
|
405
|
+
bubbles: true,
|
|
406
|
+
composed: true,
|
|
407
|
+
cancelable: true,
|
|
408
|
+
detail
|
|
409
|
+
});
|
|
410
|
+
}
|
|
411
|
+
};
|
|
412
|
+
};
|
|
392
413
|
var emitEvent = (elm, name, opts) => {
|
|
393
414
|
const ev = plt.ce(name, opts);
|
|
394
415
|
elm.dispatchEvent(ev);
|
|
@@ -399,7 +420,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
|
|
|
399
420
|
return;
|
|
400
421
|
}
|
|
401
422
|
let isProp = isMemberInElement(elm, memberName);
|
|
402
|
-
memberName.toLowerCase();
|
|
423
|
+
let ln = memberName.toLowerCase();
|
|
403
424
|
if (memberName === "class") {
|
|
404
425
|
const classList = elm.classList;
|
|
405
426
|
const oldClasses = parseClassList(oldValue);
|
|
@@ -408,7 +429,25 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
|
|
|
408
429
|
classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
|
|
409
430
|
classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
|
|
410
431
|
}
|
|
411
|
-
} else if (memberName === "key") ; else {
|
|
432
|
+
} else if (memberName === "key") ; else if ((!elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
|
|
433
|
+
if (memberName[2] === "-") {
|
|
434
|
+
memberName = memberName.slice(3);
|
|
435
|
+
} else if (isMemberInElement(win, ln)) {
|
|
436
|
+
memberName = ln.slice(2);
|
|
437
|
+
} else {
|
|
438
|
+
memberName = ln[2] + memberName.slice(3);
|
|
439
|
+
}
|
|
440
|
+
if (oldValue || newValue) {
|
|
441
|
+
const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
|
|
442
|
+
memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
|
|
443
|
+
if (oldValue) {
|
|
444
|
+
plt.rel(elm, memberName, oldValue, capture);
|
|
445
|
+
}
|
|
446
|
+
if (newValue) {
|
|
447
|
+
plt.ael(elm, memberName, newValue, capture);
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
} else {
|
|
412
451
|
const isComplex = isComplexType(newValue);
|
|
413
452
|
if ((isProp || isComplex && newValue !== null) && true) {
|
|
414
453
|
try {
|
|
@@ -453,6 +492,8 @@ var parseClassList = (value) => {
|
|
|
453
492
|
}
|
|
454
493
|
return value.split(parseClassListRegex);
|
|
455
494
|
};
|
|
495
|
+
var CAPTURE_EVENT_SUFFIX = "Capture";
|
|
496
|
+
var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
|
|
456
497
|
|
|
457
498
|
// src/runtime/vdom/update-element.ts
|
|
458
499
|
var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
|
|
@@ -672,10 +713,19 @@ var insertBefore = (parent, newNode, reference) => {
|
|
|
672
713
|
};
|
|
673
714
|
var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
|
|
674
715
|
const hostElm = hostRef.$hostElement$;
|
|
716
|
+
const cmpMeta = hostRef.$cmpMeta$;
|
|
675
717
|
const oldVNode = hostRef.$vnode$ || newVNode(null, null);
|
|
676
718
|
const isHostElement = isHost(renderFnResults);
|
|
677
719
|
const rootVnode = isHostElement ? renderFnResults : h(null, null, renderFnResults);
|
|
678
720
|
hostTagName = hostElm.tagName;
|
|
721
|
+
if (cmpMeta.$attrsToReflect$) {
|
|
722
|
+
rootVnode.$attrs$ = rootVnode.$attrs$ || {};
|
|
723
|
+
cmpMeta.$attrsToReflect$.forEach(([propName, attribute]) => {
|
|
724
|
+
{
|
|
725
|
+
rootVnode.$attrs$[attribute] = hostElm[propName];
|
|
726
|
+
}
|
|
727
|
+
});
|
|
728
|
+
}
|
|
679
729
|
if (isInitialLoad && rootVnode.$attrs$) {
|
|
680
730
|
for (const key of Object.keys(rootVnode.$attrs$)) {
|
|
681
731
|
if (hostElm.hasAttribute(key) && !["key", "ref", "style", "class"].includes(key)) {
|
|
@@ -966,8 +1016,12 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
966
1016
|
/* @__PURE__ */ new Set([
|
|
967
1017
|
...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
|
|
968
1018
|
...members.filter(([_, m]) => m[0] & 31 /* HasAttribute */).map(([propName, m]) => {
|
|
1019
|
+
var _a2;
|
|
969
1020
|
const attrName = m[1] || propName;
|
|
970
1021
|
attrNameToPropName.set(attrName, propName);
|
|
1022
|
+
if (m[0] & 512 /* ReflectAttr */) {
|
|
1023
|
+
(_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]);
|
|
1024
|
+
}
|
|
971
1025
|
return attrName;
|
|
972
1026
|
})
|
|
973
1027
|
])
|
|
@@ -1070,6 +1124,9 @@ var proxyCustomElement = (Cstr, compactMeta) => {
|
|
|
1070
1124
|
{
|
|
1071
1125
|
cmpMeta.$members$ = compactMeta[2];
|
|
1072
1126
|
}
|
|
1127
|
+
{
|
|
1128
|
+
cmpMeta.$attrsToReflect$ = [];
|
|
1129
|
+
}
|
|
1073
1130
|
const originalConnectedCallback = Cstr.prototype.connectedCallback;
|
|
1074
1131
|
const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
|
|
1075
1132
|
Object.assign(Cstr.prototype, {
|
|
@@ -1122,10 +1179,15 @@ var setPlatformOptions = (opts) => Object.assign(plt, opts);
|
|
|
1122
1179
|
|
|
1123
1180
|
// src/runtime/render.ts
|
|
1124
1181
|
function render(vnode, container) {
|
|
1182
|
+
const cmpMeta = {
|
|
1183
|
+
$flags$: 0,
|
|
1184
|
+
$tagName$: container.tagName
|
|
1185
|
+
};
|
|
1125
1186
|
const ref = {
|
|
1187
|
+
$cmpMeta$: cmpMeta,
|
|
1126
1188
|
$hostElement$: container
|
|
1127
1189
|
};
|
|
1128
1190
|
renderVdom(ref, vnode);
|
|
1129
1191
|
}
|
|
1130
1192
|
|
|
1131
|
-
export { H, getAssetPath, h, proxyCustomElement as p, render, setAssetPath, setNonce, setPlatformOptions };
|
|
1193
|
+
export { H, createEvent as c, getAssetPath, h, proxyCustomElement as p, render, setAssetPath, setNonce, setPlatformOptions };
|