Skip to content

DannyFeliz/vue-email-dropdown

Repository files navigation

vue-email-dropdown

A Vue component for autocomplete email domains

Build Status

Features

  • Allows passing a list of domains to be used in for the suggestions.
  • Allows passing a list of default domains that are going to be used when type @.
  • Closes the list by pressing Esc.
  • Allows the navigate the list by pressing Up / Down.
  • Closes the list on click outside.
  • Allows configuring the list size.

Demo

Edit Demo vue-email-dropdown

Demo

Props

Prop Type Required Default Description
domains Array True - All domains that should be used to make a domain suggestions.
defaultDomains Array False [] Default domains that should be displayed once `@` is typed.
initialValue String False "" Initial value for the email field.
maxSuggestions Number False 4 How many domain suggestions should displayed.
closeOnClickOutside Boolean False true Hide the suggestion list if you click outside the list.
inputClasses String|Array|Object False "" Classes that will be apply to the email field.

Installation

npm install vue-email-dropdown --save

# or with yarn

yarn add vue-email-dropdown

Usage

<template>
  <EmailDropdown :domains="domains" :defaultDomains="defaultDomains" />
</template>

<script>
// Import package
import EmailDropdown from "vue-email-dropdown";
// Import styles
import "vue-email-dropdown/dist/vue-email-dropdown.css";

export default {
  components: {
    EmailDropdown
  },
  data() {
    return {
      domains: [
        "yourcompany.com",
        "google.com",
        "gmx.de",
        "googlemail.com",
        "hotmail.fr",
        "hotmail.it",
        "web.de",
        "yahoo.co.in",
        "yahoo.com",
        "yahoo.in"
      ],
      defaultDomains: ["gmail.com", "hotmail.com", "msn.com", "outlook.com", "yahoo.com"]
    };
  }
};
</script>

Development setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Contributing

  1. Fork it (https://github.com/dannyfeliz/vue-email-dropdown/fork)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request