├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── .np-config.js
├── .prettierrc
├── .travis.yml
├── README.md
├── babel.config.js
├── demo
    └── demo-documentation.gif
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── components
    │   └── EmailDropdown.vue
    └── main.js
└── tests
    └── unit
        ├── .eslintrc.js
        └── email-dropdown.spec.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: ["plugin:vue/essential", "eslint:recommended"],
 7 |   rules: {
 8 |     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
 9 |     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
10 |     "vue/no-side-effects-in-computed-properties": "off",
11 |     "max-len": ["error", { code: 120 }]
12 |   },
13 |   parserOptions: {
14 |     parser: "babel-eslint"
15 |   },
16 |   overrides: [
17 |     {
18 |       files: ["**/__tests__/*.{j,t}s?(x)"],
19 |       env: {
20 |         mocha: true
21 |       }
22 |     }
23 |   ]
24 | };
25 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | package-lock.json
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/.np-config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   cleanup: false,
3 |   publish: false
4 | };


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "printWidth": 120
3 | }
4 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | os: linux
 3 | node_js:
 4 |   - 10
 5 | cache:
 6 |   directories:
 7 |     - node_modules
 8 | script:
 9 |   - npm run test
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-email-dropdown
  2 | 
  3 | A Vue component for autocomplete email domains
  4 | 
  5 | [![Build Status](https://travis-ci.org/DannyFeliz/vue-email-dropdown.svg?branch=master)](https://travis-ci.org/DannyFeliz/vue-email-dropdown)
  6 | [<img src="https://img.shields.io/npm/dt/vue-email-dropdown.svg">](https://www.npmjs.com/package/vue-email-dropdown)
  7 | [<img src="https://img.shields.io/npm/v/vue-email-dropdown.svg">](https://www.npmjs.com/package/vue-email-dropdown)
  8 | 
  9 | # Features
 10 | 
 11 | - Allows passing a list of domains to be used in for the suggestions.
 12 | - Allows passing a list of default domains that are going to be used when type `@`.
 13 | - Closes the list by pressing <kbd>Esc</kbd>.
 14 | - Allows the navigate the list by pressing <kbd>Up</kbd> / <kbd>Down</kbd>.
 15 | - Closes the list on click outside.
 16 | - Allows configuring the list size.
 17 | 
 18 | # Demo
 19 | 
 20 | [![Edit Demo vue-email-dropdown](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-template-lrkul?fontsize=14)
 21 | 
 22 | ![Demo](https://raw.githubusercontent.com/DannyFeliz/vue-email-dropdown/master/demo/demo-documentation.gif)
 23 | 
 24 | # Props
 25 | 
 26 | <table>
 27 |     <thead>
 28 |     <tr>
 29 |         <th>Prop</th>
 30 |         <th>Type</th>
 31 |         <th>Required</th>
 32 |         <th>Default</th>
 33 |         <th>Description</th>
 34 |     </tr>
 35 |     </thead>
 36 |     <tbody>
 37 |     <tr>
 38 |         <td>domains</td>
 39 |         <td>Array</td>
 40 |         <td>True</td>
 41 |         <td>-</td>
 42 |         <td>All domains that should be used to make a domain suggestions.</td>
 43 |     </tr>
 44 |     <tr>
 45 |         <td>defaultDomains</td>
 46 |         <td>Array</td>
 47 |         <td>False</td>
 48 |         <td>[]</td>
 49 |         <td>Default domains that should be displayed once `@` is typed.</td>
 50 |     </tr>
 51 |     <tr>
 52 |         <td>initialValue</td>
 53 |         <td>String</td>
 54 |         <td>False</td>
 55 |         <td>""</td>
 56 |         <td>Initial value for the email field.</td>
 57 |     </tr>
 58 |     <tr>
 59 |         <td>maxSuggestions</td>
 60 |         <td>Number</td>
 61 |         <td>False</td>
 62 |         <td>4</td>
 63 |         <td>How many domain suggestions should displayed.</td>
 64 |     </tr>
 65 |     <tr>
 66 |         <td>closeOnClickOutside</td>
 67 |         <td>Boolean</td>
 68 |         <td>False</td>
 69 |         <td>true</td>
 70 |         <td>Hide the suggestion list if you click outside the list.</td>
 71 |     </tr>
 72 |     <tr>
 73 |         <td>inputClasses</td>
 74 |         <td>String|Array|Object</td>
 75 |         <td>False</td>
 76 |         <td>""</td>
 77 |         <td>Classes that will be apply to the email field.</td>
 78 |     </tr>
 79 |     </tbody>
 80 | </table>
 81 | 
 82 | ## Installation
 83 | 
 84 | ```bash
 85 | npm install vue-email-dropdown --save
 86 | 
 87 | # or with yarn
 88 | 
 89 | yarn add vue-email-dropdown
 90 | ```
 91 | 
 92 | ## Usage
 93 | 
 94 | ```vue
 95 | <template>
 96 |   <EmailDropdown :domains="domains" :defaultDomains="defaultDomains" />
 97 | </template>
 98 | 
 99 | <script>
100 | // Import package
101 | import EmailDropdown from "vue-email-dropdown";
102 | // Import styles
103 | import "vue-email-dropdown/dist/vue-email-dropdown.css";
104 | 
105 | export default {
106 |   components: {
107 |     EmailDropdown
108 |   },
109 |   data() {
110 |     return {
111 |       domains: [
112 |         "yourcompany.com",
113 |         "google.com",
114 |         "gmx.de",
115 |         "googlemail.com",
116 |         "hotmail.fr",
117 |         "hotmail.it",
118 |         "web.de",
119 |         "yahoo.co.in",
120 |         "yahoo.com",
121 |         "yahoo.in"
122 |       ],
123 |       defaultDomains: ["gmail.com", "hotmail.com", "msn.com", "outlook.com", "yahoo.com"]
124 |     };
125 |   }
126 | };
127 | </script>
128 | ```
129 | 
130 | ## Development setup
131 | 
132 | ```
133 | npm install
134 | ```
135 | 
136 | ### Compiles and hot-reloads for development
137 | 
138 | ```
139 | npm run serve
140 | ```
141 | 
142 | ### Compiles and minifies for production
143 | 
144 | ```
145 | npm run build
146 | ```
147 | 
148 | ### Run your unit tests
149 | 
150 | ```
151 | npm run test
152 | ```
153 | 
154 | ### Lints and fixes files
155 | 
156 | ```
157 | npm run lint
158 | ```
159 | 
160 | ### Customize configuration
161 | 
162 | See [Configuration Reference](https://cli.vuejs.org/config/).
163 | 
164 | # Contributing
165 | 
166 | 1. Fork it (<https://github.com/dannyfeliz/vue-email-dropdown/fork>)
167 | 2. Create your feature branch (`git checkout -b feature/fooBar`)
168 | 3. Commit your changes (`git commit -am 'Add some fooBar'`)
169 | 4. Push to the branch (`git push origin feature/fooBar`)
170 | 5. Create a new Pull Request
171 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/demo/demo-documentation.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DannyFeliz/vue-email-dropdown/25a7f9338dd0a003fde8197fbf2cac43d3a6d0fc/demo/demo-documentation.gif


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-email-dropdown",
 3 |   "version": "2.2.3",
 4 |   "main": "./dist/vue-email-dropdown.umd.min.js",
 5 |   "files": [
 6 |     "dist/vue-email-dropdown.umd.min.js",
 7 |     "dist/vue-email-dropdown.css"
 8 |   ],
 9 |   "keywords": [
10 |     "vue",
11 |     "vue-dropdown",
12 |     "vue-email",
13 |     "vue-email-dropdown",
14 |     "autocomplete",
15 |     "autocomplete-email",
16 |     "vue-autocomplete-email"
17 |   ],
18 |   "author": "Danny Feliz <dannyfeliz08@gmail.com>",
19 |   "license": "MIT",
20 |   "bugs": "https://github.com/DannyFeliz/vue-email-dropdown/issues/new",
21 |   "repository": {
22 |     "type": "git",
23 |     "url": "https://github.com/DannyFeliz/vue-email-dropdown"
24 |   },
25 |   "scripts": {
26 |     "serve": "vue-cli-service serve",
27 |     "build": "vue-cli-service build",
28 |     "bundle": "./node_modules/@vue/cli-service/bin/vue-cli-service.js build --target lib --name vue-email-dropdown ./src/components/EmailDropdown.vue",
29 |     "generate-tag": "npm run bundle && ./node_modules/np/source/cli.js",
30 |     "publish": "npm publish --access public",
31 |     "test": "vue-cli-service test:unit",
32 |     "test:watch": "vue-cli-service test:unit --watch",
33 |     "lint": "vue-cli-service lint"
34 |   },
35 |   "dependencies": {
36 |     "core-js": "^3.4.7",
37 |     "keycoder": "^1.1.1",
38 |     "v-click-outside": "^3.0.0",
39 |     "vue": "^2.6.10"
40 |   },
41 |   "devDependencies": {
42 |     "@vue/cli-plugin-babel": "^4.1.1",
43 |     "@vue/cli-plugin-eslint": "^4.1.1",
44 |     "@vue/cli-plugin-unit-mocha": "^4.1.1",
45 |     "@vue/cli-service": "^4.1.1",
46 |     "@vue/test-utils": "1.0.0-beta.30",
47 |     "babel-eslint": "^10.0.3",
48 |     "chai": "^4.2.0",
49 |     "deep-equal-in-any-order": "^1.0.21",
50 |     "eslint": "^6.7.2",
51 |     "eslint-plugin-vue": "^6.0.1",
52 |     "np": "^5.2.1",
53 |     "sass": "^1.23.7",
54 |     "sass-loader": "^8.0.0",
55 |     "vue-template-compiler": "^2.6.10"
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DannyFeliz/vue-email-dropdown/25a7f9338dd0a003fde8197fbf2cac43d3a6d0fc/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-email-dropdown</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-email-dropdown doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |       <label>Email:</label>
 4 |       <EmailDropdown
 5 |         initialValue=""
 6 |         :closeOnClickOutside="clickOutside"
 7 |         :domains="domains"
 8 |         :maxSuggestions="5"
 9 |         :defaultDomains="defaultDomains"
10 |       />
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | import EmailDropdown from "./components/EmailDropdown.vue";
16 | 
17 | export default {
18 |   name: "app",
19 |   components: {
20 |     EmailDropdown
21 |   },
22 |   data() {
23 |     return {
24 |       clickOutside: false,
25 |       domains: [
26 |         "126.com",
27 |         "139.com",
28 |         "163.com",
29 |         "aol.com",
30 |         "buston.cn",
31 |         "foxmail.com",
32 |         "gmail.com",
33 |         "gmx.de",
34 |         "googlemail.com",
35 |         "hensao.com",
36 |         "hggame.com",
37 |         "hotmail.co.uk",
38 |         "hotmail.com",
39 |         "hotmail.fr",
40 |         "hotmail.it",
41 |         "kcidc.com",
42 |         "live.com",
43 |         "love11.com",
44 |         "mail.ru",
45 |         "msn.com",
46 |         "oneplus.cn",
47 |         "oneplus.net",
48 |         "outlook.com",
49 |         "pay55.com",
50 |         "qq.com",
51 |         "rediffmail.com",
52 |         "sfba.cn",
53 |         "sina.com",
54 |         "sohu.com",
55 |         "tour0.com",
56 |         "vip.qq.com",
57 |         "web.de",
58 |         "yahoo.co.in",
59 |         "yahoo.co.uk",
60 |         "yahoo.com",
61 |         "yahoo.in",
62 |         "yeah.net",
63 |         "ymail.com",
64 |         "ytgame.com"
65 |       ],
66 |       defaultDomains: ["gmail.com", "hotmail.com", "msn.com", "outlook.com", "yahoo.com"]
67 |     };
68 |   }
69 | };
70 | </script>
71 | 
72 | <style lang="scss">
73 | #app {
74 |   width: 200px;
75 |   display: flex;
76 |   flex-direction: column;
77 |   justify-content: center;
78 |   p {
79 |     margin: 0;
80 |   }
81 | }
82 | </style>
83 | 


--------------------------------------------------------------------------------
/src/components/EmailDropdown.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="email-dropdown-wrapper" v-click-outside="clickOutsideConfig">
  3 |     <div class="input-button-wrapper">
  4 |       <input
  5 |         v-bind="$attrs"
  6 |         v-on="$listeners"
  7 |         ref="email"
  8 |         type="email"
  9 |         :value="email"
 10 |         :class="inputClasses"
 11 |         @focus="handleEmailInputFocus"
 12 |         @input="handleInputEvent"
 13 |         @keyup.up="handleListNavigation('up')"
 14 |         @keyup.down="handleListNavigation('down')"
 15 |         @keyup.esc="handleEscPress"
 16 |         autocorrect="off"
 17 |         autocomplete="off"
 18 |         autocapitalize="off"
 19 |       />
 20 |     </div>
 21 |     <div :class="emailDropdownContainerClasses">
 22 |       <ul v-if="shouldShowList" class="email-dropdown-list">
 23 |         <li
 24 |           v-for="(domain, index) in domainsList"
 25 |           :key="index"
 26 |           tabindex="-1"
 27 |           :data-dropdown-item-index="index"
 28 |           class="email-dropdown-item"
 29 |           @click="handleOptionSelection(domain)"
 30 |           @keyup.esc="handleEscPress"
 31 |           @keyup.enter="handleOptionSelection(domain)"
 32 |           @keyup.up="handleListNavigation('up')"
 33 |           @keyup.down="handleListNavigation('down')"
 34 |           @keyup="convertCharToText"
 35 |         >
 36 |           <span class="email-dropdown-item-username">{{ username }}</span>
 37 |           <span class="email-dropdown-item-domain">@{{ domain }}</span>
 38 |         </li>
 39 |       </ul>
 40 |     </div>
 41 |   </div>
 42 | </template>
 43 | 
 44 | <script>
 45 | import Vue from "vue";
 46 | import vClickOutside from "v-click-outside";
 47 | import keycoder from "keycoder";
 48 | 
 49 | Vue.use(vClickOutside);
 50 | 
 51 | export default {
 52 |   name: "EmailDropdown",
 53 |   inheritAttrs: false,
 54 |   props: {
 55 |     initialValue: {
 56 |       type: String,
 57 |       default: ""
 58 |     },
 59 |     domains: {
 60 |       type: Array,
 61 |       required: true
 62 |     },
 63 |     defaultDomains: {
 64 |       type: Array,
 65 |       default() {
 66 |         return [];
 67 |       }
 68 |     },
 69 |     maxSuggestions: {
 70 |       type: Number,
 71 |       default: 4,
 72 |       validator(num) {
 73 |         const isInteger = Number.isInteger(num);
 74 |         if (!isInteger) {
 75 |           throw new Error(
 76 |             `Invalid prop: type check failed for prop "maxSuggestions". Expected Integer but got ${num} as value.`
 77 |           );
 78 |         }
 79 | 
 80 |         return isInteger;
 81 |       }
 82 |     },
 83 |     closeOnClickOutside: {
 84 |       type: Boolean,
 85 |       default: true
 86 |     },
 87 |     inputClasses: {
 88 |       type: [String, Array, Object],
 89 |       default: ""
 90 |     }
 91 |   },
 92 |   data() {
 93 |     return {
 94 |       email: this.initialValue,
 95 |       isEscPressed: false,
 96 |       listFocusIndex: 0,
 97 |       isFirstFocus: false,
 98 |       hasclickedOutside: false,
 99 |       clickOutsideConfig: {
100 |         handler: this.clickOutsideHandler,
101 |         middleware: this.middleware,
102 |         events: ["dblclick", "click"],
103 |         isActive: true
104 |       }
105 |     };
106 |   },
107 |   computed: {
108 |     shouldShowList() {
109 |       return Boolean(this.domainsList.length && !this.isOptionSelected && !this.isEscPressed);
110 |     },
111 |     includesAt() {
112 |       return this.email.toLowerCase().includes("@");
113 |     },
114 |     username() {
115 |       return this.email.toLowerCase().split("@")[0];
116 |     },
117 |     emailDropdownContainerClasses() {
118 |       return {
119 |         "email-dropdown-list-container": true,
120 |         hide: this.hasclickedOutside
121 |       };
122 |     },
123 |     domain() {
124 |       return this.email.toLowerCase().split("@")[1] || "";
125 |     },
126 |     suggestionList() {
127 |       return this.domainsList.map(domain => `${this.username}@${domain}`.toLowerCase());
128 |     },
129 |     isOptionSelected() {
130 |       return this.suggestionList.includes(this.email.toLowerCase());
131 |     },
132 |     domainsList() {
133 |       if (!this.includesAt) {
134 |         return [];
135 |       }
136 | 
137 |       if (!this.domain.length && this.defaultDomains.length) {
138 |         return this.defaultDomains.slice(0, this.maxSuggestions);
139 |       }
140 | 
141 |       if (!this.domain) {
142 |         return [];
143 |       }
144 | 
145 |       return this.domains
146 |         .filter(domain => domain.startsWith(this.domain))
147 |         .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
148 |         .slice(0, this.maxSuggestions);
149 |     }
150 |   },
151 |   watch: {
152 |     email() {
153 |       this.$emit("input", this.email);
154 |       this.resetFocusIndex();
155 |       if (this.isEscPressed) {
156 |         this.isEscPressed = false;
157 |       }
158 |     }
159 |   },
160 |   methods: {
161 |     convertCharToText(event) {
162 |       const INVALID_KEYS = {
163 |         ENTER: 13,
164 |         UP: 38,
165 |         DOWN: 40
166 |       };
167 |       const eventObject = keycoder.fromEvent(event);
168 |       const isValidEventChar = eventObject && !Object.values(INVALID_KEYS).includes(eventObject.charCode);
169 | 
170 |       if (isValidEventChar) {
171 |         const char = keycoder.eventToCharacter(event);
172 |         if (char) {
173 |           this.email += char;
174 |           this.$refs.email.focus();
175 |         }
176 |       }
177 |     },
178 |     clickOutsideHandler() {
179 |       this.hasclickedOutside = true;
180 |     },
181 |     handleInputEvent({ target: { value: email } }) {
182 |       this.email = email;
183 |     },
184 |     handleOptionSelection(domain) {
185 |       this.email = `${this.username}@${domain}`;
186 |       this.$refs.email.focus();
187 |       this.listFocusIndex = 0;
188 |     },
189 |     middleware({ target }) {
190 |       const isDropdownItem =
191 |         target.className === "email-dropdown-item" && target.parentNode.className.includes("email-dropdown-list");
192 | 
193 |       return this.closeOnClickOutside && !isDropdownItem;
194 |     },
195 |     handleEscPress() {
196 |       this.isEscPressed = true;
197 |       this.$refs.email.focus();
198 |     },
199 |     handleEmailInputFocus() {
200 |       this.hasclickedOutside = false;
201 |       this.resetFocusIndex();
202 |     },
203 |     resetFocusIndex() {
204 |       this.isFirstFocus = false;
205 |       this.listFocusIndex = 0;
206 |     },
207 |     handleListNavigation(direction) {
208 |       if (!this.shouldShowList || this.shouldFocusInput(direction)) return;
209 | 
210 |       const shouldScrollUp = direction == "up" && this.listFocusIndex >= 1;
211 |       const shouldSchollDown = direction == "down" && this.listFocusIndex < this.domainsList.length - 1;
212 | 
213 |       if (this.isFirstFocus) {
214 |         if (shouldScrollUp) {
215 |           this.listFocusIndex -= 1;
216 |         } else if (shouldSchollDown) {
217 |           this.listFocusIndex += 1;
218 |         }
219 |       } else {
220 |         this.isFirstFocus = true;
221 |       }
222 | 
223 |       this.$nextTick(() => {
224 |         document.querySelector(`[data-dropdown-item-index="${this.listFocusIndex}"]`).focus();
225 |       });
226 |     },
227 |     shouldFocusInput(direction) {
228 |       const shouldFocus = direction === "up" && this.listFocusIndex == 0;
229 | 
230 |       if (shouldFocus) {
231 |         this.$refs.email.focus();
232 |         this.resetFocusIndex();
233 |       }
234 | 
235 |       return shouldFocus;
236 |     }
237 |   }
238 | };
239 | </script>
240 | 
241 | <style lang="scss" scoped>
242 | .email-dropdown-wrapper {
243 |   display: flex;
244 |   flex-direction: column;
245 |   justify-content: center;
246 |   align-content: center;
247 | 
248 |   .input-button-wrapper {
249 |     position: relative;
250 |     display: flex;
251 |     flex-direction: row;
252 |   }
253 | 
254 |   input {
255 |     text-overflow: ellipsis;
256 |     width: 100%;
257 |     padding-right: 0;
258 |   }
259 | 
260 |   button {
261 |     padding: 0;
262 |     margin-left: -11.8px;
263 |     margin-right: 0;
264 |     background: transparent;
265 |     border: none;
266 |     cursor: pointer;
267 |     outline: none;
268 | 
269 |     &:focus {
270 |       outline: none;
271 |     }
272 |   }
273 | 
274 |   .email-dropdown-list-container {
275 |     position: relative;
276 |     height: 0;
277 | 
278 |     &.hide {
279 |       display: none;
280 |     }
281 |   }
282 | 
283 |   .email-dropdown-list {
284 |     height: auto;
285 |     position: absolute;
286 |     top: 0;
287 |     left: 0;
288 |     width: 100%;
289 |     z-index: 10000;
290 |     background-color: #fff;
291 |     overflow: hidden;
292 |     list-style: none;
293 |     margin: 0;
294 |     padding: 0;
295 |     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
296 |     border: 0.1px solid darkgrey;
297 |     box-sizing: border-box;
298 |     margin-top: -0.9px;
299 | 
300 |     .email-dropdown-item {
301 |       cursor: pointer;
302 |       padding-left: 2px;
303 |       padding: 2px;
304 | 
305 |       &:first-child {
306 |         border-top: none;
307 |       }
308 | 
309 |       &:hover,
310 |       &:focus {
311 |         background-color: #f2f2f2;
312 |         border: 0.1px solid darkgrey;
313 |         box-sizing: border-box;
314 |       }
315 | 
316 |       &-username {
317 |         color: #999;
318 |       }
319 | 
320 |       &-domain {
321 |         color: #101920;
322 |         font-weight: 500;
323 |       }
324 |     }
325 |   }
326 | }
327 | </style>
328 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/tests/unit/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   env: {
3 |     mocha: true
4 |   }
5 | }


--------------------------------------------------------------------------------
/tests/unit/email-dropdown.spec.js:
--------------------------------------------------------------------------------
  1 | import Vue from "vue";
  2 | import { expect } from "chai";
  3 | import { shallowMount } from "@vue/test-utils";
  4 | import EmailDropdown from "@/components/EmailDropdown.vue";
  5 | 
  6 | const deepEqualInAnyOrder = require("deep-equal-in-any-order");
  7 | const chai = require("chai");
  8 | 
  9 | chai.use(deepEqualInAnyOrder);
 10 | 
 11 | describe("EmailDropdown.vue", () => {
 12 |   let propsData;
 13 | 
 14 |   beforeEach(() => {
 15 |     propsData = {
 16 |       initialValue: "hello@",
 17 |       domains: ["google.com"],
 18 |       defaultDomains: ["hotmail.com", "outlook.com"],
 19 |       maxSuggestions: 4,
 20 |       closeOnClickOutside: true
 21 |     };
 22 |   });
 23 | 
 24 |   it("renders without show suggestions if the email does not include '@'", () => {
 25 |     propsData.initialValue = "hello";
 26 | 
 27 |     const wrapper = shallowMount(EmailDropdown, {
 28 |       propsData
 29 |     });
 30 | 
 31 |     expect(wrapper.find(".email-dropdown-list").exists()).to.be.false;
 32 |   });
 33 | 
 34 |   it("shows suggestions with default domains", () => {
 35 |     const wrapper = shallowMount(EmailDropdown, {
 36 |       propsData
 37 |     });
 38 | 
 39 |     const dropdownItems = wrapper.findAll(".email-dropdown-item");
 40 |     expect(dropdownItems).to.have.length(2);
 41 |     expect(dropdownItems.at(0).text()).to.equal("hello@hotmail.com");
 42 |     expect(dropdownItems.at(1).text()).to.equal("hello@outlook.com");
 43 |   });
 44 | 
 45 |   it("shows suggestions based in initialValue", () => {
 46 |     propsData.domains = ["gmail.com", "google.com", "outlook.com"];
 47 |     propsData.initialValue = "hello@g";
 48 | 
 49 |     const wrapper = shallowMount(EmailDropdown, {
 50 |       propsData
 51 |     });
 52 | 
 53 |     const dropdownItems = wrapper.findAll(".email-dropdown-item");
 54 | 
 55 |     expect(dropdownItems).to.have.length(2);
 56 |     expect(dropdownItems.at(0).text()).to.be.equal("hello@gmail.com");
 57 |     expect(dropdownItems.at(1).text()).to.be.equal("hello@google.com");
 58 |   });
 59 | 
 60 |   it("hides suggestions if email match the suggestion", () => {
 61 |     propsData.initialValue = "hello@google.com";
 62 | 
 63 |     const wrapper = shallowMount(EmailDropdown, {
 64 |       propsData
 65 |     });
 66 | 
 67 |     expect(wrapper.text()).to.be.empty;
 68 |     expect(wrapper.find(".email-dropdown-list").exists()).to.be.false;
 69 |     expect(wrapper.vm.isOptionSelected).to.be.true;
 70 |   });
 71 | 
 72 |   it("filter the suggestion list when type in the input", async () => {
 73 |     propsData.initialValue = "hello@g";
 74 |     propsData.domains = ["gmail.com", "google.com"];
 75 | 
 76 |     const wrapper = shallowMount(EmailDropdown, {
 77 |       propsData
 78 |     });
 79 | 
 80 |     expect(wrapper.findAll(".email-dropdown-item")).to.have.length(2);
 81 |     wrapper.find("input").setValue("hello@gma");
 82 |     await Vue.nextTick();
 83 |     expect(wrapper.findAll(".email-dropdown-item")).to.have.length(1);
 84 |     expect(wrapper.find(".email-dropdown-item").text()).to.be.equal("hello@gmail.com");
 85 |   });
 86 | 
 87 |   it("hides suggestion list if remove '@' from the email", async () => {
 88 |     const wrapper = shallowMount(EmailDropdown, {
 89 |       propsData
 90 |     });
 91 | 
 92 |     expect(wrapper.findAll(".email-dropdown-item")).to.have.length(2);
 93 |     wrapper.find("input").setValue("hello");
 94 |     await Vue.nextTick();
 95 |     expect(wrapper.find(".email-dropdown-list").exists()).to.be.false;
 96 |   });
 97 | 
 98 |   describe("events", () => {
 99 |     it("emits 'input' on email change", async () => {
100 |       propsData.domains = ["gmail.com", "google.com"];
101 | 
102 |       const wrapper = shallowMount(EmailDropdown, {
103 |         propsData
104 |       });
105 | 
106 |       wrapper.find("input").setValue("hello@gmail");
107 |       await Vue.nextTick();
108 |       expect(wrapper.emitted().input[0]).to.have.length(1);
109 |       expect(wrapper.emitted().input[0][0]).to.be.equal("hello@gmail");
110 |       wrapper.find("input").setValue("hello@gmail.");
111 |       await Vue.nextTick();
112 |       expect(wrapper.emitted().input[1]).to.have.length(1);
113 |       expect(wrapper.emitted().input[1][0]).to.be.equal("hello@gmail.");
114 |     });
115 |   });
116 | 
117 |   describe("computed", () => {
118 |     describe("includesAt", () => {
119 |       it("returns 'true' if email includes '@'", () => {
120 |         const wrapper = shallowMount(EmailDropdown, {
121 |           propsData
122 |         });
123 | 
124 |         expect(wrapper.vm.includesAt).to.be.true;
125 |       });
126 | 
127 |       it("returns 'false' if email does not includes '@'", () => {
128 |         propsData.initialValue = "hello";
129 | 
130 |         const wrapper = shallowMount(EmailDropdown, {
131 |           propsData
132 |         });
133 | 
134 |         expect(wrapper.vm.includesAt).to.be.false;
135 |       });
136 |     });
137 | 
138 |     describe("username", () => {
139 |       it("returns the email without domain", () => {
140 |         propsData.initialValue = "hello@google.com";
141 | 
142 |         const wrapper = shallowMount(EmailDropdown, {
143 |           propsData
144 |         });
145 | 
146 |         expect(wrapper.vm.username).to.be.equal("hello");
147 |       });
148 |     });
149 | 
150 |     describe("domain", () => {
151 |       it("returns the email domain", () => {
152 |         propsData.initialValue = "hello@google.com";
153 | 
154 |         const wrapper = shallowMount(EmailDropdown, {
155 |           propsData
156 |         });
157 | 
158 |         expect(wrapper.vm.domain).to.be.equal("google.com");
159 |       });
160 |     });
161 | 
162 |     describe("isOptionSelected", () => {
163 |       it("returns 'true' if the email match an item from the suggestion list", () => {
164 |         propsData.initialValue = "hello@google.com";
165 | 
166 |         const wrapper = shallowMount(EmailDropdown, {
167 |           propsData
168 |         });
169 | 
170 |         expect(wrapper.vm.isOptionSelected).to.be.true;
171 |       });
172 | 
173 |       it("returns 'false' if the email doesn't match an item from the suggestion list", () => {
174 |         propsData.initialValue = "hello@google.com";
175 | 
176 |         const wrapper = shallowMount(EmailDropdown, {
177 |           propsData
178 |         });
179 | 
180 |         expect(wrapper.vm.isOptionSelected).to.be.true;
181 |       });
182 |     });
183 | 
184 |     describe("domainsList", () => {
185 |       it("returns an empty array if includesAt is 'false'", () => {
186 |         propsData.initialValue = "hello";
187 | 
188 |         const wrapper = shallowMount(EmailDropdown, {
189 |           propsData
190 |         });
191 | 
192 |         expect(wrapper.vm.includesAt).to.be.false;
193 |         expect(wrapper.vm.domainsList).to.be.empty;
194 |       });
195 | 
196 |       it("returns default domains if doesn't have domain", () => {
197 |         const wrapper = shallowMount(EmailDropdown, {
198 |           propsData
199 |         });
200 |         expect(wrapper.vm.includesAt).to.be.true;
201 |         expect(wrapper.vm.domain).to.be.have.length(0);
202 |         expect(wrapper.vm.defaultDomains).to.be.have.length.gt(0);
203 |         expect(wrapper.vm.domainsList).to.deep.equalInAnyOrder(propsData.defaultDomains);
204 |       });
205 | 
206 |       it("returns the domains based on 'domain'", () => {
207 |         propsData.domains = ["google.com", "gmail.com"];
208 |         propsData.initialValue = "hello@g";
209 | 
210 |         const wrapper = shallowMount(EmailDropdown, {
211 |           propsData
212 |         });
213 |         expect(wrapper.vm.includesAt).to.be.true;
214 |         expect(wrapper.vm.domain).to.be.have.length(1);
215 |         expect(wrapper.vm.domainsList).to.deep.equalInAnyOrder(propsData.domains);
216 |       });
217 | 
218 |       it("return an empty list if doesn't have default domains", () => {
219 |         propsData.domains = ["google.com", "gmail.com"];
220 |         propsData.defaultDomains = [];
221 |         propsData.initialValue = "hello@";
222 | 
223 |         const wrapper = shallowMount(EmailDropdown, {
224 |           propsData
225 |         });
226 | 
227 |         expect(wrapper.vm.domainsList).to.be.have.length(0);
228 |       });
229 |     });
230 | 
231 |     describe("suggestionList", () => {
232 |       it("returns a suggestion domain list based on the domain list", () => {
233 |         propsData.domains = ["google.com", "gmail.com"];
234 |         propsData.initialValue = "hello@g";
235 | 
236 |         const expected = ["hello@gmail.com", "hello@google.com"];
237 | 
238 |         const wrapper = shallowMount(EmailDropdown, {
239 |           propsData
240 |         });
241 | 
242 |         expect(wrapper.vm.suggestionList).to.deep.equalInAnyOrder(expected);
243 |       });
244 | 
245 |       it("returns a suggestion domain list using the default domains", () => {
246 |         propsData.defaultDomains = ["yahoo.com", "mns.com"];
247 | 
248 |         const expected = ["hello@yahoo.com", "hello@mns.com"];
249 |         const wrapper = shallowMount(EmailDropdown, {
250 |           propsData
251 |         });
252 |         expect(wrapper.vm.includesAt).to.be.true;
253 |         expect(wrapper.vm.domain).to.be.have.length(0);
254 |         expect(wrapper.vm.suggestionList).to.deep.equalInAnyOrder(expected);
255 |       });
256 |     });
257 | 
258 |     describe("shouldShowList", () => {
259 |       it("returns 'true' if domainsList is 'true' and isOptionSelected is 'false'", () => {
260 |         propsData.initialValue = "hello@";
261 |         const wrapper = shallowMount(EmailDropdown, {
262 |           propsData
263 |         });
264 | 
265 |         expect(wrapper.vm.domainsList).to.have.length.gt(0);
266 |         expect(wrapper.vm.isOptionSelected).to.be.false;
267 |         expect(wrapper.vm.shouldShowList).to.be.true;
268 |       });
269 | 
270 |       it("returns 'false' if 'domainsList' is empty", () => {
271 |         propsData.initialValue = "hello";
272 |         const wrapper = shallowMount(EmailDropdown, {
273 |           propsData
274 |         });
275 |         expect(wrapper.vm.domainsList).to.be.eql([]);
276 |         expect(wrapper.vm.shouldShowList).to.be.false;
277 |       });
278 | 
279 |       it("returns 'false' if 'isOptionSelected' is false", () => {
280 |         propsData.initialValue = "hello";
281 |         const wrapper = shallowMount(EmailDropdown, {
282 |           propsData
283 |         });
284 | 
285 |         expect(wrapper.vm.isOptionSelected).to.be.false;
286 |         expect(wrapper.vm.shouldShowList).to.be.false;
287 |       });
288 |     });
289 |   });
290 | });
291 | 


--------------------------------------------------------------------------------