@substrate-system/secret-text
v0.0.1
Published
 [](README.md) [
Readme
Secret Text
Web component for secrets. Has a copy button and visiblity icon button.
Install
npm i -S @substrate-system/secret-textExample
API
This exposes ESM and common JS via
package.json exports field.
ESM
import '@substrate-system/secret-text'Common JS
require('@substrate-system/secret-text')Attributes
| Attribute | Type | Description |
|-----------|------|-------------|
| value | string | The secret text to display or mask |
| visible | boolean | If present, the secret is shown in plain text; if absent, it is masked with bullets |
Events
| Event | Detail | Description |
|-------|--------|-------------|
| secret-text:copy | { value: string } | Fired when the copy button is clicked |
| secret-text:show | { isVisible: boolean } | Fired when the secret is revealed |
| secret-text:hide | { isVisible: boolean } | Fired when the secret is hidden |
document.querySelector('secret-text')
.addEventListener('secret-text:show', (ev) => {
console.log(ev.detail.isVisible) // true
})CSS
Import CSS
import '@substrate-system/secret-text/css'Or minified:
import '@substrate-system/secret-text/min/css'Customize CSS via variables
| Variable | Default | Description |
|----------|---------|-------------|
| --st-bg | #fff | Background color of the component |
| --st-border | #1a1a1a | Border color |
| --st-radius | 0 | Border radius |
| --st-text | #1a1a1a | Text color |
| --st-btn | #8a8a8a | Eye button icon color |
| --st-btn-hover | #1a1a1a | Eye button icon color on hover |
| --st-btn-hover-bg | rgb(0 0 0 / 5%) | Eye button background color on hover |
| --st-focus | #2563eb | Focus outline color |
| --st-font | 'Courier New', 'Courier', monospace | Font family for the secret text |
secret-text {
--st-bg: #f9fafb;
--st-border: #d1d5db;
--st-radius: 6px;
--st-focus: #7c3aed;
}Use
This calls the global function customElements.define. Just import, then use
the tag in your HTML.
JS
import '@substrate-system/secret-text'HTML
<div>
<secret-text></secret-text>
</div>pre-built
This package exposes minified JS and CSS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.
copy
cp ./node_modules/@substrate-system/secret-text/dist/index.min.js ./public/secret-text.min.js
cp ./node_modules/@substrate-system/secret-text/dist/style.min.css ./public/secret-text.cssHTML
<head>
<link rel="stylesheet" href="./secret-text.css">
</head>
<body>
<!-- ... -->
<script type="module" src="./secret-text.min.js"></script>
</body>