Pass View Controller is a Stimulus controller for showing the password in a password field.
| Target | Element(s) | Description |
|---|---|---|
| button |
button |
The button to show and hide the password. The controller creates this. |
These are standard HTML attributes (with no prefix) used by Table Filter.
| Attribute | Element(s) | Default | Value(s) | Description |
|---|---|---|---|---|
| aria-pressed |
button |
false |
true false |
The controller will set this attribute on the button to indicate whether the button is pressed. It will have the opposite value to the visibility of the password text. |
All of these attributes are prefixed with "data-" in the attribute name.
| Attribute | Element(s) | Default | Value(s) | Description |
|---|---|---|---|---|
| controller |
input[type="password"] |
passview |
This attribute provides the functionality. |
All of these attributes are prefixed with "data-tablefilter-" and suffixed with "-value" in the attribute name.
| Attribute | Element(s) | Default | Value(s) | Description |
|---|---|---|---|---|
| path |
(controller) |
The path to the folder holding the "css" and "img" folders. This is only needed if the CSS and images are not in the default location relative to the controller JS file. |
||
| icon-open |
(controller) |
eye.svg |
The icon to use for the "show password" button when the password is hidden. This is inside a folder called "img" relative to the "path" attribute. |
|
| icon-closed |
(controller) |
eye-slash.svg |
The icon to use for the "show password" button when the password is visiable. This is inside a folder called "img" relative to the "path" attribute. |
These are custom events that the controller will fire when it takes certain actions.
All of these events are prefixed by "passview:".
| Event | Parameters | Description |
|---|---|---|
| initialized | Called any time that the controller is initialized. | |
| connected | Called any time that the controller is connected. | |
| disconnected | Called any time that the controller is disconnected. | |
| toggled |
target: (the table that is filtered) visible: (boolean - true if the password is visible) |
Called any time that the password visibility is toggled. |
While it is recommended to use the controller via the attributes listed above, the following methods can be called directly if needed.
| Method | Returns | Arguments | Event(s) | Description |
|---|---|---|---|---|
| toggle |
Toggles the visibility of the password. |