Earlene  Rowe

Earlene Rowe

1589658300

A lightweight input masking library with Vue.

Vue Input Facade

A lightweight and dependency free input masking library created specific for Vue.
Let’go.

#input #vue #vue-js

What is GEEK

Buddha Community

A lightweight input masking library with Vue.
Ethan Hughes

Ethan Hughes

1578498958

Collection of 15 Vue Input Component for Your Vue.js App

Vue input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. In this article I will share 15 Vue input components to you.

1. Maska

  • No dependencies
  • Small size (~2 Kb gziped)
  • Ability to define custom tokens
  • Supports repeat symbols and dynamic masks
  • Works on any input (custom or native)

Maska

Demo

Download


2. v-range-flyout

A vue component that wraps a input type=number with a customizable range slider flyout with 2-way binding.

v-range-flyout

Demo

Download


3. vue-tel-input

International Telephone Input with Vue.

vue-tel-input

Demo

Download


4. Restricted Input

Allow restricted character sets in input elements.

Features

  • Disallow arbitrary characters based on patterns
  • Maintains caret position
  • Format/Update on paste
  • Works in IE11+

Restricted Input

Demo

Download


5. Vue Currency Input

The Vue Currency Input plugin allows an easy input of currency formatted numbers.

Vue Currency Input

Demo

Download


6. vue-fields

Input components for vue.js.

vue-fields

Demo

Download


7. vue-material-input

Simple example of issue I am seeing with input labels.

vue-material-input

Demo

Download


8. vue-tribute

A Vue.js wrapper for Zurb’s Tribute library for native @mentions.

vue-tribute

Demo

Download


9. vue-number-smarty

Number input with rich functionality for Vue.js.

Features

  • integer/float
  • signed/unsigned
  • step size
  • increment/decrement value by scrolling when focused
  • align variants
  • min and max boundaries
  • max length of integer part (only for float type)
  • max length of float part (only for float type)
  • max length of string
  • error state
  • readonly state
  • theme options

vue-number-smarty

Demo

Download


10. Vue input mask

Super tiny input mask library for vue.js based on PureMask.js (~2kb) exposed as directive. No dependencies.

Vue input mask

Demo

Download


11. vue-r-mask

mask directive for vue.js

  • Template similar to javascript regular expression. /\d{2}/
  • Directive useful for your own input or textarea.
  • Arbitrary number of digits in template /\d{1,10}/

vue-r-mask

Demo

Download


12. Vue IP

An ip address input with port and material design support.

Vue IP

Demo

Download


13. v-money Mask for Vue.js

Tiny input/directive mask for currency

Features

  • Lightweight (<2KB gzipped)
  • Dependency free
  • Mobile support
  • Component or Directive flavors
  • Accept copy/paste
  • Editable

v-money Mask for Vue.js

Demo

Download


14. Vue Masked Input

Dead simple masked input component for Vue.js 2.X. Based on inputmask-core.

Vue Masked Input

Demo

Download


15. VueJS input component

Mobile & Desktop friendly VueJS input component
Features used
CSS variables
Vue’s transition-group
Flexbox

VueJS input component

Demo


I hope you like them!

#vue-js #vue-input #vue-input-component #input-vue

Luna  Mosciski

Luna Mosciski

1600583123

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Earlene  Rowe

Earlene Rowe

1589658300

A lightweight input masking library with Vue.

Vue Input Facade

A lightweight and dependency free input masking library created specific for Vue.
Let’go.

#input #vue #vue-js

Asmait Ermias

Asmait Ermias

1592551380

A lightweight and dependency free input masking library created specific for Vue

Vue Input Facade

A lightweight and dependency free input masking library created specific for Vue

Installing

npm i vue-input-facade
yarn add vue-input-facade

Importing

Globally

Installs the component, directive and filter for your entire application.

import InputFacade from 'vue-input-facade'
Vue.use(InputFacade)

Locally

Install per component as needed

import { InputFacade, facade, filter } from 'vue-input-facade'

export default {
  components: { InputFacade },
  directives: { facade },
  filters: { facade: filter },
  // ... rest of component config
}

Default Mask Tokens

  • S = alpha characters
  • # = numerical characters
  • X = alpha numerical characters
  • A = alpha characters, transformed to uppercase
  • a = alpha characters, transformed to lowercase
  • \ = escape any of the above characters

See the token source file for definition signature

Usage

As Component

<label>Phone Number</label>
<input-facade mask="(###) ###-####" name="phoneNumber" type="tel" />

As Directive

<label>Date</label>
<input type="text" v-facade="'##/##/##'" />

Migrating existing projects

If you are migrating an existing project to vue-input-facade from another plugin and dont want to touch the whole codebase. You may pass options during plugin installation to override the default tokens or directive name.

import InputFacade from 'vue-input-facade'

// migrating from v-mask
const options = {
  // rename the directive from: v-facade to: v-mask
  name: 'mask',

  // use these tokens instead of the default
  tokens: {
    '#': { pattern: /\d/ },
    'A': { pattern: /[a-z]/i },
    'N': { pattern: /[0-9a-z]/i },
    'X': { pattern: /./ }
  }
}

Vue.use(InputFacade, options)

See demo page for more usage examples

Contribution

You’re free to contribute to this project by submitting issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests. The project uses semantic-release to release new versions, therefore all commit messages should follow conventional commits, we are using commitizen to facilitate writting the commit messages.

Download Details:

Author: RonaldJerez

Live Demo: https://ronaldjerez.github.io/vue-input-facade/

GitHub: https://github.com/RonaldJerez/vue-input-facade

#vuejs #javascript #vue-js #vue

Input mask library for Vue.js based on restricted-input

Restricted Input

Allow restricted character sets in input elements.

Demo

Try the latest version of Restricted Input here.

Features

  • Disallow arbitrary characters based on patterns
  • Maintains caret position
  • Format/Update on paste
  • Works in IE11+

Development

Install dependencies

source-shell
nvm use # if you have node version manager installed
npm i

Watch files and run demo server

source-shell
npm run development

This will start a server on port 3099 which can be overridden with the PORT env var.

Unit tests

The following command will run the linting task and the unit tests.

source-shell
npm test

Integration tests

We use Browserstack to automate end to end testing on Google Chrome, Safari, Firefox, Microsoft Edge, and Internet Explorer 11.

First, sign up for a free open source Browserstack account.

Copy the .env.example file to .env

source-shell
cp .env.example .env

Fill in the BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY environmental variables with your credentials:

source-shell
BROWSERSTACK_USERNAME=username
BROWSERSTACK_ACCESS_KEY=access_key

To run the integration tests in Safari, Google Chrome, Firefox, IE11 and Microsoft Edge:

source-shell
npm run development # in another terminal window
npm run test:integration

To run tests in only one browser, prefix the test command with an ONLY_BROWSERS env variable:

source-shell
# run only in edge browser
ONLY_BROWSERS=edge npm run test:integration

# run only in chrome browser
ONLY_BROWSERS=chrome npm run test:integration

# run only in ie 11 browser
ONLY_BROWSERS=ie npm run test:integration

# run only in safari browser
ONLY_BROWSERS=safari npm run test:integration

# run only in firefox browser
ONLY_BROWSERS=firefox npm run test:integration

To run tests in certain browsers, prefix the test command with an ONLY_BROWSERS env variable, with each browser comma separated:

source-shell
# run only in edge and chrome browsers
ONLY_BROWSERS=edge,chrome npm run test:integration

To run only certain tests, add the .only property before running the test:

source-js
it.only('does something', function () {

Usage

source-js
import RestrictedInput from 'restricted-input';

const formattedCreditCardInput = new RestrictedInput({
  element: document.querySelector('#credit-card'),
  pattern: '{{9999}} {{9999}} {{9999}} {{9999}}'
});

Patterns

Patterns are a mixture of Placeholders and PermaChars.

Placeholder

A Placeholder is the part of the pattern that accepts user input based on some restrictions. A placeholder is defined in the pattern using two open curly brackets, the placeholder, followed by two closing curly brackets e.g. {{Abc123}}.

The patterns a Placeholder can be are:

  • a single alpha character that matches the alpha regex /[A-Za-z]/. e.g. {{C}} will match one alpha character.
  • a single digit that matches the digit regex /[0-9]/. e.g. {{3}} will match one digit.
  • a * character that matches /./. e.g. {{*}} will match the next character.

PermaChar

A PermaChar is the part of the pattern that is automatically inserted. PermaChars are defined in the pattern as any characters other than Placeholders.

Example patterns

Some example patterns with behavior are listed:

  • 12{{3}}
    • Inserts 12.
    • Waits for a single digit from the user.
  • {{A}}BC
    • Waits for a single alpha from the user.
    • Inserts BC.
  • ${{*2L}}E
    • Inserts $.
    • Waits for any single character input from the user.
    • Waits for a single digit from the user.
    • Waits for a single alpha from the user.
    • Inserts E.

Paste Event

If an input is changed via a paste event, you may want to adjust the pattern before input formatting occurs. In this case, pass an onPasteEvent callback:

source-js
const formattedCreditCardInput = new RestrictedInput({
  element: document.querySelector('#credit-card'),
  pattern: '{{9999}} {{9999}} {{9999}} {{9999}}',
  onPasteEvent: function (payload) {
    var value = payload.unformattedInputValue;

    if (requiresAmexPattern(value)) {
      formattedCreditCardInput.setPattern('{{9999}} {{999999}} {{99999}}')
    } else {
      formattedCreditCardInput.setPattern('{{9999}} {{9999}} {{9999}} {{9999}}')
    }
  })
});

API

options

Key Type Description
element HTMLInputElement or HTMLTextAreaElement A valid reference to an input or textarea DOM node
pattern String Pattern describing the allowed character set you wish for entry into corresponding field. See Patterns.
onPasteEvent Function (optional) A callback function to inspect the unformatted value of the input during a paste event. See Paste Event.

Browser Support

Desktop

  • Chrome (latest)
  • Firefox (17+)
  • Safari (8+)
  • IE11 (desktop/metro)
  • IE10 (desktop/metro)
  • IE9

Browsers Where Formatting is Turned Off Automatically

Old versions of Samsung Android browsers are incompatible with formatting. These will not attempt to intercept the values and format the input.

TODO

  • [ ] Improve jsdoc
  • [ ] Add example guides/pages

Github

braintree/restricted-input

#vuejs #javascript #vue-js #vue