@mannydiera/first-name

First Name input field vanilla js component that can be used with or without a js framework

Install

$ npm install @mannydiera/first-name

Usage

After installing, you do not have to import it into your files because the web component is registered on the DOM. Just add the html tag as below.

    <first-name></first-name> 
      Or
    <first-name/>

We can use the concept of 'props' by passing values to the element's data- attributes. Let's call them props for simplicity.

This component contains no mandatory prop and 3 optional props. If any of these props are updated, the component will emit an 'attrChange' event.

optional data-label: Contains the label's text. (Default is 'First Name')

<first-name data-label="First Name"></first-name>

optional data-rules: Contains an array of 1 or more functions that will either return true or the validation message. The functions will be run in order and when one fails, that message will be shown.

// Somewhere in your file or in an imported file in your app
const isTooShort = (val) => (val && val.length > 12) || 'Input must be at least 12 characters';

rules.push(isTooShort);

    <first-name data-rules="rules"></first-name>

optional data-theme: An object containing styles you want to pass as the theme for the success/error messages.

// Sample theme object.
// Note: These colors are the default.
        const myTheme = {
            success: '#ffffff',
            error: 'red',
            default: 'blue',
        };

<first-name data-theme="myTheme"></first-name>

You can set the input field theme globally by using the following classes.

.input-wc-base-theme.success {}
.input-wc-base-theme.error {}
.input-wc-base-theme.defualt {}
.input-wc-base-theme.disabled {}

    

You can also set the root theme for the entire project (input fields and other @mannydiera components) by using these classes.

  .wc-base-global-theme.success {}     
  .wc-base-global-theme.error {}     
  .wc-base-global-theme.default {}     
  .wc-base-global-theme.disabled {}    

Sample 'In App' implementations below.

// Vanilla JS
    ...

// Angular 1.*
    ...

// Angular 2 +
    ...

// React
    ...
    
// Svelte
    ...
    
// Vue
    ...