@ynetlabo/ui-core 0.1.0 → 0.1.2
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 +2 -2
- package/package.json +2 -2
- package/src/base/element.js +9 -4
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
[ui-labo](https://github.com/yuuint/ui-labo) のプレーン Web 実装。
|
|
4
4
|
素の Custom Elements で書いており、ランタイム依存はありません。
|
|
5
5
|
|
|
6
|
-
**[デモとドキュメント](https://
|
|
6
|
+
**[デモとドキュメント](https://ui.ynetlabo.net/)**
|
|
7
7
|
|
|
8
8
|
```sh
|
|
9
9
|
npm install @ynetlabo/ui-core
|
|
@@ -26,7 +26,7 @@ CSS カスタムプロパティ経由なので、読み込むだけでテーマ
|
|
|
26
26
|
|
|
27
27
|
| 要素 | 仕様 |
|
|
28
28
|
|---|---|
|
|
29
|
-
| `<yn-prefecture-picker>` | [都道府県 Picker](https://
|
|
29
|
+
| `<yn-prefecture-picker>` | [都道府県 Picker](https://ui.ynetlabo.net/prefecture-picker.html) |
|
|
30
30
|
|
|
31
31
|
## フレームワークから使う
|
|
32
32
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ynetlabo/ui-core",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "ui-labo のプレーン Web 実装。素の Custom Elements で書き、第三者ライブラリを使わない",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"scripts": {
|
|
23
23
|
"test": "node --test test/*.test.mjs"
|
|
24
24
|
},
|
|
25
|
-
"homepage": "https://
|
|
25
|
+
"homepage": "https://ui.ynetlabo.net/",
|
|
26
26
|
"bugs": {
|
|
27
27
|
"url": "https://github.com/yuuint/ui-labo/issues"
|
|
28
28
|
},
|
package/src/base/element.js
CHANGED
|
@@ -15,7 +15,7 @@ export class YnElement extends HTMLElement {
|
|
|
15
15
|
#state = {};
|
|
16
16
|
#frame = 0;
|
|
17
17
|
#ready = false;
|
|
18
|
-
#
|
|
18
|
+
#reflectingAttr = null;
|
|
19
19
|
|
|
20
20
|
constructor() {
|
|
21
21
|
super();
|
|
@@ -53,7 +53,11 @@ export class YnElement extends HTMLElement {
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
attributeChangedCallback(attr, _old, value) {
|
|
56
|
-
|
|
56
|
+
// 自分で書き戻した「その属性」だけを無視する。
|
|
57
|
+
// setAttribute は [CEReactions] なので、その中で保留中の
|
|
58
|
+
// 別の属性のコールバックまで同期で流れてくる。まとめて止めると、
|
|
59
|
+
// HTML に書かれた 2 つ目以降の属性を丸ごと取りこぼす
|
|
60
|
+
if (this.#reflectingAttr === attr) return;
|
|
57
61
|
const entry = Object.entries(this.constructor.props)
|
|
58
62
|
.find(([k, d]) => (d.attr ?? toAttr(k)) === attr);
|
|
59
63
|
if (!entry) return;
|
|
@@ -72,13 +76,14 @@ export class YnElement extends HTMLElement {
|
|
|
72
76
|
if (def.reflect === false || type === "json") return;
|
|
73
77
|
if (v !== null && typeof v === "object") return;
|
|
74
78
|
const attr = def.attr ?? toAttr(key);
|
|
75
|
-
|
|
79
|
+
const prev = this.#reflectingAttr;
|
|
80
|
+
this.#reflectingAttr = attr;
|
|
76
81
|
try {
|
|
77
82
|
if (type === "boolean") this.toggleAttribute(attr, !!v);
|
|
78
83
|
else if (v === null || v === undefined) this.removeAttribute(attr);
|
|
79
84
|
else this.setAttribute(attr, String(v));
|
|
80
85
|
} finally {
|
|
81
|
-
this.#
|
|
86
|
+
this.#reflectingAttr = prev;
|
|
82
87
|
}
|
|
83
88
|
}
|
|
84
89
|
|