@wcstack/debounce 2.1.1 → 2.3.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.ja.md +9 -4
- package/README.md +10 -4
- package/package.json +1 -1
package/README.ja.md
CHANGED
|
@@ -71,7 +71,12 @@ npm install @wcstack/debounce
|
|
|
71
71
|
export default {
|
|
72
72
|
$commandTokens: ["search"],
|
|
73
73
|
$eventTokens: ["searchSettled"],
|
|
74
|
-
|
|
74
|
+
results: [],
|
|
75
|
+
onSearchInput(e) {
|
|
76
|
+
// Event ではなく検索文字列を載せる。`oninput:` から直接 command を発火すると
|
|
77
|
+
// 第1引数は Event になり、`<wcs-debounce>` は args をそのまま保持する。
|
|
78
|
+
this.$command.search.emit(e.target.value);
|
|
79
|
+
},
|
|
75
80
|
$on: {
|
|
76
81
|
searchSettled: (state, event) => {
|
|
77
82
|
const [q] = event.detail.args; // 最後のキー入力から 300ms 後に1回だけ
|
|
@@ -82,7 +87,7 @@ npm install @wcstack/debounce
|
|
|
82
87
|
</script>
|
|
83
88
|
</wcs-state>
|
|
84
89
|
|
|
85
|
-
<input data-wcs="oninput:
|
|
90
|
+
<input data-wcs="oninput: onSearchInput">
|
|
86
91
|
<wcs-debounce
|
|
87
92
|
wait="300"
|
|
88
93
|
data-wcs="command.trigger: $command.search; eventToken.fired: searchSettled">
|
|
@@ -141,8 +146,8 @@ npm install @wcstack/debounce
|
|
|
141
146
|
ひいては配線先 — はインスタンス自身の `eventPrefix` を追跡します）。
|
|
142
147
|
|
|
143
148
|
```css
|
|
144
|
-
|
|
145
|
-
wcs-debounce:state(pending) ~ .spinner { display:
|
|
149
|
+
.spinner { display: none; } /* デフォルト */
|
|
150
|
+
wcs-debounce:state(pending) ~ .spinner { display: block; } /* デバウンス中 */
|
|
146
151
|
|
|
147
152
|
wcs-throttle:state(pending) ~ .indicator { opacity: 1; }
|
|
148
153
|
```
|
package/README.md
CHANGED
|
@@ -74,7 +74,13 @@ npm install @wcstack/debounce
|
|
|
74
74
|
export default {
|
|
75
75
|
$commandTokens: ["search"],
|
|
76
76
|
$eventTokens: ["searchSettled"],
|
|
77
|
-
|
|
77
|
+
results: [],
|
|
78
|
+
onSearchInput(e) {
|
|
79
|
+
// Emit the query string, not the event: a command emitted from an
|
|
80
|
+
// `oninput:` binding receives the Event as its first argument, and
|
|
81
|
+
// `<wcs-debounce>` keeps the args verbatim.
|
|
82
|
+
this.$command.search.emit(e.target.value);
|
|
83
|
+
},
|
|
78
84
|
$on: {
|
|
79
85
|
searchSettled: (state, event) => {
|
|
80
86
|
// fires once, 300ms after the last keystroke
|
|
@@ -86,7 +92,7 @@ npm install @wcstack/debounce
|
|
|
86
92
|
</script>
|
|
87
93
|
</wcs-state>
|
|
88
94
|
|
|
89
|
-
<input data-wcs="oninput:
|
|
95
|
+
<input data-wcs="oninput: onSearchInput">
|
|
90
96
|
<wcs-debounce
|
|
91
97
|
wait="300"
|
|
92
98
|
data-wcs="command.trigger: $command.search; eventToken.fired: searchSettled">
|
|
@@ -145,8 +151,8 @@ so you can style them directly from CSS with the `:state()` pseudo-class — no
|
|
|
145
151
|
the event namespace — and therefore the wiring — tracks its own `eventPrefix`).
|
|
146
152
|
|
|
147
153
|
```css
|
|
148
|
-
|
|
149
|
-
wcs-debounce:state(pending) ~ .spinner { display:
|
|
154
|
+
.spinner { display: none; } /* default */
|
|
155
|
+
wcs-debounce:state(pending) ~ .spinner { display: block; } /* while debouncing */
|
|
150
156
|
|
|
151
157
|
wcs-throttle:state(pending) ~ .indicator { opacity: 1; }
|
|
152
158
|
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wcstack/debounce",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.3.0",
|
|
4
4
|
"description": "Declarative debounce/throttle components for Web Components. Framework-agnostic signal coalescing via wc-bindable-protocol.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.esm.js",
|