0.0.30 • Published 3 years ago
wc-test-input v0.0.30
input field
A Web Component for input field.
installation:
npm i wc-test-input
To use this web component, you need to install "validator.js" aswell. If you dont already have it
npm install validator --save
usage:
first import script to your page
import "wc-test-input";
then in your markup
<wc-test-input
required
type="text"
label="label"
minlength="5">
<i slot="rightIcon" className="fas fa-dragon"/>
</wc-test-input>
Attributes:
Attribute | Description | type | default | required |
---|---|---|---|---|
alpha | alpha character validation | Boolean | false | no |
animated | label is static if this attiribute does not exist | Boolean | false | no |
error-message | message to show when error occurs | String | false | no |
invalid | set this as input exptected to be invalid | Boolean | false | no |
label | label above input field | String | none | no |
lang | language code | String | en-US | no |
maxlength | maximum number of character enabled | String | none | no |
minlength | minimum number of character for validation | String | none | no |
pattern | patter to mask user input "A" for alpha chars "1" for numbers | String | none | no |
placeholder | placeholder | String | none | no |
regex | regex to validate against | String | none | no |
required | validation for empty | Boolean | none | no |
type | input type | String | none | yes |
value | input value for controlled input. event fired on input change is "textChanged" | String | none | no |
Events:
Event | Description | required |
---|---|---|
errorEvent | fires with an error key when validation fails you can access key with "event.detail.key" | no |
textChanged | fires with value of input when text changed you can access value with "event.detail.value" | no |
Contributing:
Feel free to make your "Pull Request" 🏆
Future:
- Notify parent component about "errorKey". Possible solition would be firing a custom event
- Add input mask for custom pattern.
- Add more options for pattern and validation.
- Add testing.