haori 0.1.2 → 0.1.3

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.
Files changed (38) hide show
  1. package/LICENSE +21 -21
  2. package/README.ja.md +182 -167
  3. package/README.md +184 -169
  4. package/dist/haori.cjs.js +10 -9
  5. package/dist/haori.cjs.js.map +1 -1
  6. package/dist/haori.es.js +666 -569
  7. package/dist/haori.es.js.map +1 -1
  8. package/dist/haori.iife.js +10 -9
  9. package/dist/haori.iife.js.map +1 -1
  10. package/dist/index.d.ts +1 -1
  11. package/dist/package.json +1 -1
  12. package/dist/src/expression.d.ts +27 -3
  13. package/dist/src/expression.d.ts.map +1 -1
  14. package/dist/src/expression.js +97 -24
  15. package/dist/src/expression.js.map +1 -1
  16. package/dist/src/form.d.ts.map +1 -1
  17. package/dist/src/form.js +17 -3
  18. package/dist/src/form.js.map +1 -1
  19. package/dist/src/index.d.ts +1 -1
  20. package/dist/src/index.js +1 -1
  21. package/dist/src/procedure.d.ts.map +1 -1
  22. package/dist/src/procedure.js +37 -16
  23. package/dist/src/procedure.js.map +1 -1
  24. package/dist/tests/core.test.js +46 -46
  25. package/dist/tests/data-each-browserlike.test.js +10 -10
  26. package/dist/tests/data-each-fragment-debug.test.js +36 -36
  27. package/dist/tests/data-each-table.test.js +93 -10
  28. package/dist/tests/data-each-table.test.js.map +1 -1
  29. package/dist/tests/data-fetch-tbody-dom.test.js +12 -12
  30. package/dist/tests/expression.test.js +37 -21
  31. package/dist/tests/expression.test.js.map +1 -1
  32. package/dist/tests/form.test.js +241 -241
  33. package/dist/tests/import.test.js +34 -34
  34. package/dist/tests/procedure-action-operations.test.js +85 -0
  35. package/dist/tests/procedure-action-operations.test.js.map +1 -1
  36. package/dist/tests/row-move.test.js +67 -67
  37. package/dist/tests/row-operations.test.js +84 -84
  38. package/package.json +70 -70
package/dist/tests/form.test.js CHANGED
@@ -18,12 +18,12 @@ describe('Form', () => {
18
18
  });
19
19
  describe('getValues', () => {
20
20
  it('should get simple values', async () => {
21
- container.innerHTML = `
22
- <form>
23
- <input type="text" name="name" value="田中太郎">
24
- <input type="number" name="age" value="25">
25
- <input type="email" name="email" value="tanaka@example.com">
26
- </form>
21
+ container.innerHTML = `
22
+ <form>
23
+ <input type="text" name="name" value="田中太郎">
24
+ <input type="number" name="age" value="25">
25
+ <input type="email" name="email" value="tanaka@example.com">
26
+ </form>
27
27
  `;
28
28
  await Core.scan(container);
29
29
  await waitForDomSettled();
@@ -35,15 +35,15 @@ describe('Form', () => {
35
35
  expect(values.email).toBe('tanaka@example.com');
36
36
  });
37
37
  it('should get nested object values with data-form-object', async () => {
38
- container.innerHTML = `
39
- <form>
40
- <input type="text" name="name" value="田中太郎">
41
- <div data-form-object="address">
42
- <input type="text" name="city" value="東京">
43
- <input type="text" name="street" value="渋谷区1-1-1">
44
- <input type="text" name="zip" value="150-0001">
45
- </div>
46
- </form>
38
+ container.innerHTML = `
39
+ <form>
40
+ <input type="text" name="name" value="田中太郎">
41
+ <div data-form-object="address">
42
+ <input type="text" name="city" value="東京">
43
+ <input type="text" name="street" value="渋谷区1-1-1">
44
+ <input type="text" name="zip" value="150-0001">
45
+ </div>
46
+ </form>
47
47
  `;
48
48
  await Core.scan(container);
49
49
  await waitForDomSettled();
@@ -58,17 +58,17 @@ describe('Form', () => {
58
58
  });
59
59
  });
60
60
  it('should get deeply nested object values', async () => {
61
- container.innerHTML = `
62
- <form>
63
- <input type="text" name="name" value="会社A">
64
- <div data-form-object="location">
65
- <input type="text" name="country" value="日本">
66
- <div data-form-object="address">
67
- <input type="text" name="city" value="東京">
68
- <input type="text" name="district" value="渋谷区">
69
- </div>
70
- </div>
71
- </form>
61
+ container.innerHTML = `
62
+ <form>
63
+ <input type="text" name="name" value="会社A">
64
+ <div data-form-object="location">
65
+ <input type="text" name="country" value="日本">
66
+ <div data-form-object="address">
67
+ <input type="text" name="city" value="東京">
68
+ <input type="text" name="district" value="渋谷区">
69
+ </div>
70
+ </div>
71
+ </form>
72
72
  `;
73
73
  await Core.scan(container);
74
74
  await waitForDomSettled();
@@ -87,14 +87,14 @@ describe('Form', () => {
87
87
  it('should get array values with data-form-list on container', async () => {
88
88
  // data-form-listは入力要素ではなくコンテナ要素に付ける
89
89
  // 入力要素に直接付けた場合は配列にならない（最後の値のみ取得される）
90
- container.innerHTML = `
91
- <form>
92
- <div data-form-list="tags">
93
- <div><input type="text" name="value" value="タグ1"></div>
94
- <div><input type="text" name="value" value="タグ2"></div>
95
- <div><input type="text" name="value" value="タグ3"></div>
96
- </div>
97
- </form>
90
+ container.innerHTML = `
91
+ <form>
92
+ <div data-form-list="tags">
93
+ <div><input type="text" name="value" value="タグ1"></div>
94
+ <div><input type="text" name="value" value="タグ2"></div>
95
+ <div><input type="text" name="value" value="タグ3"></div>
96
+ </div>
97
+ </form>
98
98
  `;
99
99
  await Core.scan(container);
100
100
  await waitForDomSettled();
@@ -108,23 +108,23 @@ describe('Form', () => {
108
108
  ]);
109
109
  });
110
110
  it('should get object array values with data-form-list on container', async () => {
111
- container.innerHTML = `
112
- <form>
113
- <div data-form-list="items">
114
- <div>
115
- <input type="text" name="name" value="商品A">
116
- <input type="number" name="price" value="100">
117
- </div>
118
- <div>
119
- <input type="text" name="name" value="商品B">
120
- <input type="number" name="price" value="200">
121
- </div>
122
- <div>
123
- <input type="text" name="name" value="商品C">
124
- <input type="number" name="price" value="300">
125
- </div>
126
- </div>
127
- </form>
111
+ container.innerHTML = `
112
+ <form>
113
+ <div data-form-list="items">
114
+ <div>
115
+ <input type="text" name="name" value="商品A">
116
+ <input type="number" name="price" value="100">
117
+ </div>
118
+ <div>
119
+ <input type="text" name="name" value="商品B">
120
+ <input type="number" name="price" value="200">
121
+ </div>
122
+ <div>
123
+ <input type="text" name="name" value="商品C">
124
+ <input type="number" name="price" value="300">
125
+ </div>
126
+ </div>
127
+ </form>
128
128
  `;
129
129
  await Core.scan(container);
130
130
  await waitForDomSettled();
@@ -138,28 +138,28 @@ describe('Form', () => {
138
138
  ]);
139
139
  });
140
140
  it('should get nested array with objects', async () => {
141
- container.innerHTML = `
142
- <form>
143
- <input type="text" name="orderName" value="注文1">
144
- <div data-form-list="products">
145
- <div>
146
- <input type="text" name="productName" value="商品X">
147
- <input type="number" name="quantity" value="2">
148
- <div data-form-object="details">
149
- <input type="text" name="color" value="赤">
150
- <input type="text" name="size" value="M">
151
- </div>
152
- </div>
153
- <div>
154
- <input type="text" name="productName" value="商品Y">
155
- <input type="number" name="quantity" value="1">
156
- <div data-form-object="details">
157
- <input type="text" name="color" value="青">
158
- <input type="text" name="size" value="L">
159
- </div>
160
- </div>
161
- </div>
162
- </form>
141
+ container.innerHTML = `
142
+ <form>
143
+ <input type="text" name="orderName" value="注文1">
144
+ <div data-form-list="products">
145
+ <div>
146
+ <input type="text" name="productName" value="商品X">
147
+ <input type="number" name="quantity" value="2">
148
+ <div data-form-object="details">
149
+ <input type="text" name="color" value="赤">
150
+ <input type="text" name="size" value="M">
151
+ </div>
152
+ </div>
153
+ <div>
154
+ <input type="text" name="productName" value="商品Y">
155
+ <input type="number" name="quantity" value="1">
156
+ <div data-form-object="details">
157
+ <input type="text" name="color" value="青">
158
+ <input type="text" name="size" value="L">
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </form>
163
163
  `;
164
164
  await Core.scan(container);
165
165
  await waitForDomSettled();
@@ -181,34 +181,34 @@ describe('Form', () => {
181
181
  ]);
182
182
  });
183
183
  it('should get complex nested structure with multiple arrays', async () => {
184
- container.innerHTML = `
185
- <form>
186
- <input type="text" name="companyName" value="会社X">
187
- <div data-form-list="departments">
188
- <div>
189
- <input type="text" name="deptName" value="営業部">
190
- <div data-form-list="employees">
191
- <div>
192
- <input type="text" name="empName" value="田中">
193
- <input type="text" name="role" value="部長">
194
- </div>
195
- <div>
196
- <input type="text" name="empName" value="佐藤">
197
- <input type="text" name="role" value="課長">
198
- </div>
199
- </div>
200
- </div>
201
- <div>
202
- <input type="text" name="deptName" value="開発部">
203
- <div data-form-list="employees">
204
- <div>
205
- <input type="text" name="empName" value="鈴木">
206
- <input type="text" name="role" value="リーダー">
207
- </div>
208
- </div>
209
- </div>
210
- </div>
211
- </form>
184
+ container.innerHTML = `
185
+ <form>
186
+ <input type="text" name="companyName" value="会社X">
187
+ <div data-form-list="departments">
188
+ <div>
189
+ <input type="text" name="deptName" value="営業部">
190
+ <div data-form-list="employees">
191
+ <div>
192
+ <input type="text" name="empName" value="田中">
193
+ <input type="text" name="role" value="部長">
194
+ </div>
195
+ <div>
196
+ <input type="text" name="empName" value="佐藤">
197
+ <input type="text" name="role" value="課長">
198
+ </div>
199
+ </div>
200
+ </div>
201
+ <div>
202
+ <input type="text" name="deptName" value="開発部">
203
+ <div data-form-list="employees">
204
+ <div>
205
+ <input type="text" name="empName" value="鈴木">
206
+ <input type="text" name="role" value="リーダー">
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </form>
212
212
  `;
213
213
  await Core.scan(container);
214
214
  await waitForDomSettled();
@@ -233,12 +233,12 @@ describe('Form', () => {
233
233
  });
234
234
  describe('setValues', () => {
235
235
  it('should set simple values', async () => {
236
- container.innerHTML = `
237
- <form>
238
- <input type="text" name="name" value="">
239
- <input type="number" name="age" value="">
240
- <input type="email" name="email" value="">
241
- </form>
236
+ container.innerHTML = `
237
+ <form>
238
+ <input type="text" name="name" value="">
239
+ <input type="number" name="age" value="">
240
+ <input type="email" name="email" value="">
241
+ </form>
242
242
  `;
243
243
  await Core.scan(container);
244
244
  await waitForDomSettled();
@@ -258,14 +258,14 @@ describe('Form', () => {
258
258
  expect(emailInput.value).toBe('yamada@example.com');
259
259
  });
260
260
  it('should set nested object values', async () => {
261
- container.innerHTML = `
262
- <form>
263
- <input type="text" name="name" value="">
264
- <div data-form-object="address">
265
- <input type="text" name="city" value="">
266
- <input type="text" name="street" value="">
267
- </div>
268
- </form>
261
+ container.innerHTML = `
262
+ <form>
263
+ <input type="text" name="name" value="">
264
+ <div data-form-object="address">
265
+ <input type="text" name="city" value="">
266
+ <input type="text" name="street" value="">
267
+ </div>
268
+ </form>
269
269
  `;
270
270
  await Core.scan(container);
271
271
  await waitForDomSettled();
@@ -287,18 +287,18 @@ describe('Form', () => {
287
287
  expect(streetInput.value).toBe('北区2-2-2');
288
288
  });
289
289
  it('should set deeply nested object values', async () => {
290
- container.innerHTML = `
291
- <form>
292
- <div data-form-object="company">
293
- <input type="text" name="name" value="">
294
- <div data-form-object="location">
295
- <input type="text" name="country" value="">
296
- <div data-form-object="address">
297
- <input type="text" name="city" value="">
298
- </div>
299
- </div>
300
- </div>
301
- </form>
290
+ container.innerHTML = `
291
+ <form>
292
+ <div data-form-object="company">
293
+ <input type="text" name="name" value="">
294
+ <div data-form-object="location">
295
+ <input type="text" name="country" value="">
296
+ <div data-form-object="address">
297
+ <input type="text" name="city" value="">
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </form>
302
302
  `;
303
303
  await Core.scan(container);
304
304
  await waitForDomSettled();
@@ -324,19 +324,19 @@ describe('Form', () => {
324
324
  expect(cityInput.value).toBe('福岡');
325
325
  });
326
326
  it('should set object array values', async () => {
327
- container.innerHTML = `
328
- <form>
329
- <div data-form-list="items">
330
- <div>
331
- <input type="text" name="name" value="">
332
- <input type="number" name="price" value="">
333
- </div>
334
- <div>
335
- <input type="text" name="name" value="">
336
- <input type="number" name="price" value="">
337
- </div>
338
- </div>
339
- </form>
327
+ container.innerHTML = `
328
+ <form>
329
+ <div data-form-list="items">
330
+ <div>
331
+ <input type="text" name="name" value="">
332
+ <input type="number" name="price" value="">
333
+ </div>
334
+ <div>
335
+ <input type="text" name="name" value="">
336
+ <input type="number" name="price" value="">
337
+ </div>
338
+ </div>
339
+ </form>
340
340
  `;
341
341
  await Core.scan(container);
342
342
  await waitForDomSettled();
@@ -357,18 +357,18 @@ describe('Form', () => {
357
357
  expect(priceInputs[1].value).toBe('600');
358
358
  });
359
359
  it('should set nested array with objects', async () => {
360
- container.innerHTML = `
361
- <form>
362
- <div data-form-list="orders">
363
- <div>
364
- <input type="text" name="orderId" value="">
365
- <div data-form-object="customer">
366
- <input type="text" name="name" value="">
367
- <input type="text" name="phone" value="">
368
- </div>
369
- </div>
370
- </div>
371
- </form>
360
+ container.innerHTML = `
361
+ <form>
362
+ <div data-form-list="orders">
363
+ <div>
364
+ <input type="text" name="orderId" value="">
365
+ <div data-form-object="customer">
366
+ <input type="text" name="name" value="">
367
+ <input type="text" name="phone" value="">
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </form>
372
372
  `;
373
373
  await Core.scan(container);
374
374
  await waitForDomSettled();
@@ -396,11 +396,11 @@ describe('Form', () => {
396
396
  });
397
397
  describe('addErrorMessage', () => {
398
398
  it('should add error message to simple input', async () => {
399
- container.innerHTML = `
400
- <form>
401
- <input type="text" name="name" value="">
402
- <input type="email" name="email" value="">
403
- </form>
399
+ container.innerHTML = `
400
+ <form>
401
+ <input type="text" name="name" value="">
402
+ <input type="email" name="email" value="">
403
+ </form>
404
404
  `;
405
405
  await Core.scan(container);
406
406
  await waitForDomSettled();
@@ -413,13 +413,13 @@ describe('Form', () => {
413
413
  expect(parentElement.getAttribute('data-message')).toBe('名前は必須です');
414
414
  });
415
415
  it('should add error message to nested object field', async () => {
416
- container.innerHTML = `
417
- <form>
418
- <div data-form-object="address">
419
- <input type="text" name="city" value="">
420
- <input type="text" name="street" value="">
421
- </div>
422
- </form>
416
+ container.innerHTML = `
417
+ <form>
418
+ <div data-form-object="address">
419
+ <input type="text" name="city" value="">
420
+ <input type="text" name="street" value="">
421
+ </div>
422
+ </form>
423
423
  `;
424
424
  await Core.scan(container);
425
425
  await waitForDomSettled();
@@ -432,14 +432,14 @@ describe('Form', () => {
432
432
  expect(parentElement.getAttribute('data-message')).toBe('市区町村は必須です');
433
433
  });
434
434
  it('should add error message to deeply nested field', async () => {
435
- container.innerHTML = `
436
- <form>
437
- <div data-form-object="company">
438
- <div data-form-object="location">
439
- <input type="text" name="country" value="">
440
- </div>
441
- </div>
442
- </form>
435
+ container.innerHTML = `
436
+ <form>
437
+ <div data-form-object="company">
438
+ <div data-form-object="location">
439
+ <input type="text" name="country" value="">
440
+ </div>
441
+ </div>
442
+ </form>
443
443
  `;
444
444
  await Core.scan(container);
445
445
  await waitForDomSettled();
@@ -452,20 +452,20 @@ describe('Form', () => {
452
452
  expect(parentElement.getAttribute('data-message')).toBe('国名は必須です');
453
453
  });
454
454
  it('should add error message to array item field', async () => {
455
- container.innerHTML = `
456
- <form>
457
- <div data-form-list="items">
458
- <div data-row="0">
459
- <input type="text" name="name" value="">
460
- </div>
461
- <div data-row="1">
462
- <input type="text" name="name" value="">
463
- </div>
464
- <div data-row="2">
465
- <input type="text" name="name" value="">
466
- </div>
467
- </div>
468
- </form>
455
+ container.innerHTML = `
456
+ <form>
457
+ <div data-form-list="items">
458
+ <div data-row="0">
459
+ <input type="text" name="name" value="">
460
+ </div>
461
+ <div data-row="1">
462
+ <input type="text" name="name" value="">
463
+ </div>
464
+ <div data-row="2">
465
+ <input type="text" name="name" value="">
466
+ </div>
467
+ </div>
468
+ </form>
469
469
  `;
470
470
  await Core.scan(container);
471
471
  await waitForDomSettled();
@@ -480,21 +480,21 @@ describe('Form', () => {
480
480
  expect(parentElement.getAttribute('data-message')).toBe('2番目の項目名は必須です');
481
481
  });
482
482
  it('should add error message to nested field in array item', async () => {
483
- container.innerHTML = `
484
- <form>
485
- <div data-form-list="orders">
486
- <div data-row="0">
487
- <div data-form-object="customer">
488
- <input type="text" name="name" value="">
489
- </div>
490
- </div>
491
- <div data-row="1">
492
- <div data-form-object="customer">
493
- <input type="text" name="name" value="">
494
- </div>
495
- </div>
496
- </div>
497
- </form>
483
+ container.innerHTML = `
484
+ <form>
485
+ <div data-form-list="orders">
486
+ <div data-row="0">
487
+ <div data-form-object="customer">
488
+ <input type="text" name="name" value="">
489
+ </div>
490
+ </div>
491
+ <div data-row="1">
492
+ <div data-form-object="customer">
493
+ <input type="text" name="name" value="">
494
+ </div>
495
+ </div>
496
+ </div>
497
+ </form>
498
498
  `;
499
499
  await Core.scan(container);
500
500
  await waitForDomSettled();
@@ -508,10 +508,10 @@ describe('Form', () => {
508
508
  expect(parentElement.getAttribute('data-message')).toBe('顧客名は必須です');
509
509
  });
510
510
  it('should add error message to form when key not found', async () => {
511
- container.innerHTML = `
512
- <form>
513
- <input type="text" name="name" value="">
514
- </form>
511
+ container.innerHTML = `
512
+ <form>
513
+ <input type="text" name="name" value="">
514
+ </form>
515
515
  `;
516
516
  await Core.scan(container);
517
517
  await waitForDomSettled();
@@ -522,13 +522,13 @@ describe('Form', () => {
522
522
  expect(form.getAttribute('data-message')).toBe('フォーム全体のエラー');
523
523
  });
524
524
  it('should clear messages with Form.clearMessages', async () => {
525
- container.innerHTML = `
526
- <form>
527
- <input type="text" name="name" value="">
528
- <div data-form-object="address">
529
- <input type="text" name="city" value="">
530
- </div>
531
- </form>
525
+ container.innerHTML = `
526
+ <form>
527
+ <input type="text" name="name" value="">
528
+ <div data-form-object="address">
529
+ <input type="text" name="city" value="">
530
+ </div>
531
+ </form>
532
532
  `;
533
533
  await Core.scan(container);
534
534
  await waitForDomSettled();
@@ -547,35 +547,35 @@ describe('Form', () => {
547
547
  });
548
548
  describe('getValues and setValues roundtrip', () => {
549
549
  it('should maintain data integrity with complex nested structure', async () => {
550
- container.innerHTML = `
551
- <form>
552
- <input type="text" name="title" value="">
553
- <div data-form-object="metadata">
554
- <input type="text" name="author" value="">
555
- <input type="text" name="version" value="">
556
- </div>
557
- <div data-form-list="sections">
558
- <div>
559
- <input type="text" name="heading" value="">
560
- <div data-form-list="paragraphs">
561
- <div>
562
- <input type="text" name="text" value="">
563
- </div>
564
- <div>
565
- <input type="text" name="text" value="">
566
- </div>
567
- </div>
568
- </div>
569
- <div>
570
- <input type="text" name="heading" value="">
571
- <div data-form-list="paragraphs">
572
- <div>
573
- <input type="text" name="text" value="">
574
- </div>
575
- </div>
576
- </div>
577
- </div>
578
- </form>
550
+ container.innerHTML = `
551
+ <form>
552
+ <input type="text" name="title" value="">
553
+ <div data-form-object="metadata">
554
+ <input type="text" name="author" value="">
555
+ <input type="text" name="version" value="">
556
+ </div>
557
+ <div data-form-list="sections">
558
+ <div>
559
+ <input type="text" name="heading" value="">
560
+ <div data-form-list="paragraphs">
561
+ <div>
562
+ <input type="text" name="text" value="">
563
+ </div>
564
+ <div>
565
+ <input type="text" name="text" value="">
566
+ </div>
567
+ </div>
568
+ </div>
569
+ <div>
570
+ <input type="text" name="heading" value="">
571
+ <div data-form-list="paragraphs">
572
+ <div>
573
+ <input type="text" name="text" value="">
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+ </form>
579
579
  `;
580
580
  await Core.scan(container);
581
581
  await waitForDomSettled();