@substrate-system/password-input 0.0.4 → 0.0.5
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 +54 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -30,6 +30,8 @@ Accessible by default — `aria-*` attributes, the `id` attribute, and a
|
|
|
30
30
|
+ [Supported `aria-*` attributes](#supported-aria--attributes)
|
|
31
31
|
+ [Usage Notes](#usage-notes)
|
|
32
32
|
+ [Example](#example)
|
|
33
|
+
- [Events](#events)
|
|
34
|
+
* [Example: keep several inputs in sync](#example-keep-several-inputs-in-sync)
|
|
33
35
|
- [Use](#use)
|
|
34
36
|
* [JS](#js)
|
|
35
37
|
* [HTML](#html)
|
|
@@ -121,6 +123,58 @@ That is controlled by the component.
|
|
|
121
123
|
```
|
|
122
124
|
|
|
123
125
|
|
|
126
|
+
## Events
|
|
127
|
+
|
|
128
|
+
The component emits namespaced custom events whenever its visibility changes.
|
|
129
|
+
The events [bubble](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles),
|
|
130
|
+
so you can listen on the element itself or on any ancestor.
|
|
131
|
+
|
|
132
|
+
| Event | Emitted when |
|
|
133
|
+
| --- | --- |
|
|
134
|
+
| `password-input:show` | The input becomes visible (`type="text"`). |
|
|
135
|
+
| `password-input:hide` | The input becomes hidden (`type="password"`). |
|
|
136
|
+
|
|
137
|
+
Build the event name with the static `PasswordInput.event(...)` helper, or pass
|
|
138
|
+
the string directly. `ev.target` is the `<password-input>` that changed.
|
|
139
|
+
|
|
140
|
+
```js
|
|
141
|
+
import { PasswordInput } from '@substrate-system/password-input'
|
|
142
|
+
|
|
143
|
+
const input = document.querySelector('password-input')
|
|
144
|
+
|
|
145
|
+
input.addEventListener(PasswordInput.event('show'), (ev) => {
|
|
146
|
+
console.log(ev.target.isVisible) // true
|
|
147
|
+
})
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
There is also a short-hand `.on(...)` method on the element that namespaces the
|
|
151
|
+
event name for you:
|
|
152
|
+
|
|
153
|
+
```js
|
|
154
|
+
input.on('hide', (ev) => { /* ... */ })
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
### Example: keep several inputs in sync
|
|
158
|
+
|
|
159
|
+
Because the events bubble, a single delegated listener can keep every
|
|
160
|
+
`<password-input>` on the page in sync — clicking any input's eye button
|
|
161
|
+
shows or hides them all.
|
|
162
|
+
|
|
163
|
+
```js
|
|
164
|
+
import { PasswordInput } from '@substrate-system/password-input'
|
|
165
|
+
|
|
166
|
+
function syncVisibility (ev) {
|
|
167
|
+
const visible = ev.target.isVisible
|
|
168
|
+
document.querySelectorAll('password-input').forEach(el => {
|
|
169
|
+
el.isVisible = visible
|
|
170
|
+
})
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
document.addEventListener(PasswordInput.event('show'), syncVisibility)
|
|
174
|
+
document.addEventListener(PasswordInput.event('hide'), syncVisibility)
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
|
|
124
178
|
## Use
|
|
125
179
|
|
|
126
180
|
This calls the global function `customElements.define`. Just import, then use
|