Merge branch 'master' of https://github.com/Jeremy410/vue-email-dropdown

DannyFeliz · Jan 18, 2020 · 2fe4778 · 2fe4778
2 parents bc731fc + 8956f7f
commit 2fe4778
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 76 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,15 +1,13 @@
 <template>
   <div id="app">
-    <form>
       <label>Email:</label>
       <EmailDropdown
-      initialValue=""
-      :closeOnClickOutside="clickOutside"
-      :domains="domains"
-      :maxSuggestions="5"
-      :defaultDomains="defaultDomains"
-    />
-    </form>
+        initialValue=""
+        :closeOnClickOutside="clickOutside"
+        :domains="domains"
+        :maxSuggestions="5"
+        :defaultDomains="defaultDomains"
+      />
   </div>
 </template>
 

diff --git a/src/components/EmailDropdown.vue b/src/components/EmailDropdown.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="email-dropdown-wrapper" v-click-outside="clickOutsideConfig">
-    <div>
+    <div class="input-button-wrapper">
       <input
         v-bind="$attrs"
         v-on="$listeners"
@@ -18,7 +18,7 @@
         autocomplete="off"
         autocapitalize="off"
       />
-      <button v-if="showCleanButton" @click="clearInput" value="x" />
+      <button type="reset" @click="clearInput" class="clear" />
     </div>
     <div class="email-dropdown-list-container" :class="{ hide: hasclickedOutside }">
       <ul v-if="shouldShowList" class="email-dropdown-list">
@@ -28,14 +28,15 @@
           tabindex="-1"
           :data-dropdown-item-index="index"
           class="email-dropdown-item"
-          :class="{'email-dropdown-item-focus': index === listFocusIndex && !isEmailInputFocused}"
           @click="handleOptionSelection(domain)"
           @keyup.esc="handleEscPress"
           @keyup.enter="handleOptionSelection(domain)"
           @keyup.up="handleListNavigation('up')"
           @keyup.down="handleListNavigation('down')"
-          @keyup="convertCharToText"
-        >{{ emailWithoutDomain }}@{{ domain }}</li>
+          @keyup="convertCharToText">
+          <span class="email-dropdown-item-username">{{ username }}</span>
+          <span class="email-dropdown-item-domain">@{{ domain }}</span>
+        </li>
       </ul>
     </div>
   </div>
@@ -56,10 +57,6 @@ export default {
       type: String,
       default: ""
     },
-    showCleanButton: {
-      type: Boolean,
-      default: false
-    },
     domains: {
       type: Array,
       required: true
@@ -96,9 +93,7 @@ export default {
   data() {
     return {
       email: this.initialValue,
-      isOptionSelected: false,
       isEscPressed: false,
-      isEmailInputFocused: false,
       listFocusIndex: 0,
       isFirstFocus: false,
       hasclickedOutside: false,
@@ -112,40 +107,38 @@ export default {
   },
   computed: {
     shouldShowList() {
-      return Boolean(this.domainsList.length && !this.optionIsSelected && !this.isEscPressed);
+      return Boolean(this.domainsList.length && !this.isOptionSelected && !this.isEscPressed);
     },
     includesAt() {
       return this.email.toLowerCase().includes("@");
     },
-    emailWithoutDomain() {
+    username() {
       return this.email.toLowerCase().split("@")[0];
     },
-    emailDomain() {
+    domain() {
       return this.email.toLowerCase().split("@")[1] || "";
     },
     suggestionList() {
-      return this.domainsList.map(domain => `${this.emailWithoutDomain}@${domain}`.toLowerCase());
+      return this.domainsList.map(domain => `${this.username}@${domain}`.toLowerCase());
     },
-    optionIsSelected() {
+    isOptionSelected() {
       return this.suggestionList.includes(this.email.toLowerCase());
     },
     domainsList() {
       if (!this.includesAt) {
         return [];
       }
 
-      if (!this.emailDomain.length && this.defaultDomains.length) {
-        return this.defaultDomains
-          .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
-          .slice(0, this.maxSuggestions);
+      if (!this.domain.length && this.defaultDomains.length) {
+        return this.defaultDomains.slice(0, this.maxSuggestions);
       }
 
-      if (!this.emailDomain) {
+      if (!this.domain) {
         return [];
       }
 
       return this.domains
-        .filter(domain => domain.startsWith(this.emailDomain))
+        .filter(domain => domain.startsWith(this.domain))
         .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
         .slice(0, this.maxSuggestions);
     }
@@ -184,8 +177,7 @@ export default {
       this.email = email;
     },
     handleOptionSelection(domain) {
-      this.email = `${this.emailWithoutDomain}@${domain}`;
-      this.isOptionSelected = true;
+      this.email = `${this.username}@${domain}`;
       this.$refs.email.focus();
       this.listFocusIndex = 0;
     },
@@ -200,13 +192,9 @@ export default {
       this.$refs.email.focus();
     },
     handleEmailInputFocus() {
-      this.isEmailInputFocused = true;
       this.hasclickedOutside = false;
       this.resetFocusIndex();
     },
-    handleEmailInputBlur() {
-      this.isEmailInputFocused = false;
-    },
     resetFocusIndex() {
       this.isFirstFocus = false;
       this.listFocusIndex = 0;
@@ -241,9 +229,8 @@ export default {
 
       return shouldFocus;
     },
-    clearInput(e) {
-      e.preventDefault();
-      this.email = '';
+    clearInput() {
+      this.email = "";
     }
   }
 };
@@ -256,6 +243,45 @@ export default {
   justify-content: center;
   align-content: center;
 
+
+  .input-button-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+  }
+  
+  input {
+    text-overflow: ellipsis;
+  }
+
+  .clear {
+    border: 1px solid transparent;
+    background-color: transparent;
+    display: inline-block;
+    vertical-align: middle;
+    outline: 0;
+    cursor: pointer;
+  }
+
+  .clear:after {
+    content: "\00d7";
+    position: absolute;
+    width: 15px;
+    right: 30px;
+    top: 3px;
+    height: 15px;
+    z-index: 1;
+    border-radius: 50%;
+    text-align: center;
+    color: gray;
+    font-size: 12px;
+    cursor: pointer;
+  }
+
+  input:valid ~ .clear {
+    display: none;
+  }
+  
   .email-dropdown-list-container {
     position: relative;
     height: 0;
@@ -297,6 +323,15 @@ export default {
         border: 0.1px solid darkgrey;
         box-sizing: border-box;
       }
+
+      &-username {
+        color: #999;
+      }
+
+      &-domain {
+        color: #101920;
+        font-weight: 500;
+      }
     }
   }
 }