1.0.4 • Published 1 year ago
@meveo-org/mv-input v1.0.4
mv-input
MvInput is a Meveo input component based on lit-element.
Quick Start
To experiment with the MvInput component.
Clone this repo.
Serve the project from the root directory with some http server (best served with meveo itself)
Update the input demo component in demo.js file
Sample usage
<mv-input
type="text" // type accepts all valid values for html input tag
name="input-name" // the name of of the input, this is returned in the details
// when an input-change event is dispatched.
value="${this.inputValue}" // the value of the input
placeholder="Enter text here" // placeholder shown on input when no value is entered yet
rounded // the input is rendered with rounded ends
has-error // the input is rendered with error borders
@input-change="${this.changeValue}" // custom event dispatched when the input value is changed
disabled // the input is disabled
required // the input's placeholder has a bolder text to indicate that
// it is required
immediate // this will immediately trigger the @input-change event on key press
// otherwise, it waits for the focus to change or enter key is pressed
pattern="mm/dd/yyyy" // This is the pattern used for input masking
pattern-matcher="mdy" // This indicates which characters in the pattern will be matched
// when entering a character (not used if pattern is not defined)
pattern-regex="\\d" // Regular expression that is used to match the input value
// (not used if pattern is not defined)
>
<button slot="prefix"> @ </button> // shows this element before the input box
<button slot="suffix"> >> </button> // shows this element after the input box
</mv-input>
You can also check this demo
Acknowledgement
Input masking logic is derived from stackoverflow