Remove styling from components and revert back PR#38

Move styling from components, now using css file import instead. Revert back PR jm-david#38, tested and debugged, makes emoji picker much more slower so reverting it back.

README.md

@@ -15,6 +15,9 @@
 ```js
 import { Picker } from 'emoji-mart-vue'
 ```
+```css
+import 'emoji-mart-vue/css/emoji-mart.css'
+```
 
 ```html
 <picker set="emojione" />

src/components/anchors.vue

@@ -45,56 +45,3 @@ export default {
 }
 
 </script>
-
-<style scoped>
-
-.emoji-mart-anchors {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 0 6px;
-  color: #858585;
-  line-height: 0;
-}
-
-.emoji-mart-anchor {
-  position: relative;
-  display: block;
-  flex: 1 1 auto;
-  text-align: center;
-  padding: 12px 4px;
-  overflow: hidden;
-  transition: color .1s ease-out;
-}
-.emoji-mart-anchor:hover,
-.emoji-mart-anchor-selected {
-  color: #464646;
-}
-
-.emoji-mart-anchor-selected .emoji-mart-anchor-bar {
-  bottom: 0;
-}
-
-.emoji-mart-anchor-bar {
-  position: absolute;
-  bottom: -3px; left: 0;
-  width: 100%; height: 3px;
-  background-color: #464646;
-}
-
-.emoji-mart-anchors i {
-  display: inline-block;
-  width: 100%;
-  max-width: 22px;
-}
-
-</style>
-
-<style>
-
-.emoji-mart-anchors svg {
-  fill: currentColor;
-  max-height: 18px;
-}
-
-</style>

src/components/category.vue

@@ -87,78 +87,3 @@ export default {
 }
 
 </script>
-
-<style scoped>
-
-.emoji-mart-category {
-  position: relative;
-}
-
-.emoji-mart-category-label {
-  position: sticky;
-  top: 0;
-}
-
-.emoji-mart-category .emoji-mart-emoji:before {
-  z-index: 0;
-  content: "";
-  position: absolute;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
-  background-color: #f4f4f4;
-  border-radius: 100%;
-  opacity: 0;
-}
-
-.emoji-mart-category .emoji-mart-emoji:hover:before {
-  opacity: 1;
-}
-
-.emoji-mart-category-label {
-  z-index: 2;
-  position: relative;
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0;
-}
-
-.emoji-mart-category-label span {
-  display: block;
-  width: 100%;
-  font-weight: 500;
-  padding: 5px 6px;
-  background-color: #fff;
-  background-color: rgba(255, 255, 255, .95);
-}
-
-.emoji-mart-no-results {
-  font-size: 14px;
-  text-align: center;
-  padding-top: 70px;
-  color: #858585;
-}
-
-.emoji-mart-no-results .emoji-mart-category-label {
-  display: none;
-}
-
-.emoji-mart-no-results .emoji-mart-no-results-label {
-  margin-top: .2em;
-}
-
-.emoji-mart-no-results .emoji-mart-emoji:hover:before {
-  content: none;
-}
-
-</style>
-
-<style>
-
-.emoji-mart-category .emoji-mart-emoji span {
-  z-index: 1;
-  position: relative;
-  text-align: center;
-  cursor: default;
-}
-
-</style>

src/components/emoji/nimbleEmoji.vue

@@ -25,17 +25,15 @@ export default {
       required: true
     }
   },
-  data() {
-    return {
-      mutableData: this.data.compressed ? uncompress(this.data) : this.data,
-    }
-  },
   computed: {
+    parsedData() {
+      return this.data.compressed ? uncompress(this.data) : this.data
+    },
     emojiData() {
-      return getData(this.emoji, this.skin, this.set, this.mutableData)
+      return getData(this.emoji, this.skin, this.set, this.parsedData)
     },
     sanitizedData() {
-      return getSanitizedData(this.emoji, this.skin, this.set, this.mutableData)
+      return getSanitizedData(this.emoji, this.skin, this.set, this.parsedData)
     },
     canRender() {
       return this.isCustom || this.isNative || this.hasEmoji || this.fallback
@@ -119,14 +117,4 @@ export default {
   }
 }
 
-</script>
-
-<style scoped>
-
-.emoji-mart-emoji {
-  position: relative;
-  display: inline-block;
-  font-size: 0;
-}
-
-</style>
+</script>

src/components/picker/nimblePicker.vue

@@ -3,8 +3,8 @@
 <div class="emoji-mart" :style="customStyles">
   <div class="emoji-mart-bar" v-if="showCategories">
     <anchors
-      :data="mutableData"
-      :i18n="mutableI18n"
+      :data="parsedData"
+      :i18n="mergedI18n"
       :color="color"
       :categories="filteredCategories"
       :active-category="activeCategory"
@@ -15,8 +15,8 @@
   <search
     v-if="showSearch"
     ref="search"
-    :data="mutableData"
-    :i18n="mutableI18n"
+    :data="parsedData"
+    :i18n="mergedI18n"
     :emojis-to-show-filter="emojisToShowFilter"
     :include="include"
     :exclude="exclude"
@@ -29,8 +29,8 @@
   <div class="emoji-mart-scroll" ref="scroll" @scroll="onScroll">
     <category
       v-show="searchEmojis"
-      :data="mutableData"
-      :i18n="mutableI18n"
+      :data="parsedData"
+      :i18n="mergedI18n"
       id="search"
       name="Search"
       :emojis="searchEmojis"
@@ -41,8 +41,8 @@
       v-show="!searchEmojis && (infiniteScroll || category == activeCategory)"
       ref="categories"
       :key="category.id"
-      :data="mutableData"
-      :i18n="mutableI18n"
+      :data="parsedData"
+      :i18n="mergedI18n"
       :id="category.id"
       :name="category.name"
       :emojis="category.emojis"
@@ -52,7 +52,7 @@
 
   <div class="emoji-mart-bar" v-if="showPreview">
     <preview
-      :data="mutableData"
+      :data="parsedData"
       :title="title"
       :emoji="previewEmoji"
       :idle-emoji="emoji"
@@ -132,13 +132,11 @@ export default {
     }
 
     if (this.emojisToShowFilter) {
-      customEmojis = customEmojis.filter(e => this.emojisToShowFilter(this.mutableData.emojis[e] || e))
-      recentEmojis = recentEmojis.filter(e => this.emojisToShowFilter(this.mutableData.emojis[e] || e))
+      customEmojis = customEmojis.filter(e => this.emojisToShowFilter(this.parsedData.emojis[e] || e))
+      recentEmojis = recentEmojis.filter(e => this.emojisToShowFilter(this.parsedData.emojis[e] || e))
     }
 
     return {
-      mutableData: this.data.compressed ? uncompress(this.data) : this.data,
-      mutableI18n: deepMerge(I18N, this.i18n),
       activeSkin: this.skin || store.get('skin') || this.defaultSkin,
       categories: [],
       activeCategory: null,
@@ -149,6 +147,9 @@ export default {
     }
   },
   computed: {
+    parsedData() {
+      return this.data.compressed ? uncompress(this.data) : this.data
+    },
     customStyles() {
       return {
         width: this.calculateWidth + 'px',
@@ -186,20 +187,23 @@ export default {
 
         if (this.emojisToShowFilter) {
           hasEmojis = category.emojis.some((emoji) => {
-            return this.emojisToShowFilter(this.mutableData.emojis[emoji] || emoji)
+            return this.emojisToShowFilter(this.parsedData.emojis[emoji] || emoji)
           })
         }
 
         return isIncluded && !isExcluded && hasEmojis
       })
     },
+    mergedI18n() {
+      return deepMerge(I18N, this.i18n)
+    }
   },
   created() {
-    let categories = this.mutableData.categories.map(c => {
+    let categories = this.parsedData.categories.map(c => {
       let { id, name, emojis } = c
 
       if (this.emojisToShowFilter) {
-        emojis = c.emojis.filter(e => this.emojisToShowFilter(this.data.emojis[e] || e))
+        emojis = c.emojis.filter(e => this.emojisToShowFilter(this.parsedData.emojis[e] || e))
       }
 
       return { id, name, emojis }
@@ -301,60 +305,4 @@ export default {
   }
 }
 
-</script>
-
-<style>
-
-.emoji-mart,
-.emoji-mart * {
-  box-sizing: border-box;
-  line-height: 1.15;
-}
-
-.emoji-mart .emoji-mart-emoji {
-  padding: 6px;
-}
-
-</style>
-
-<style scoped>
-
-.emoji-mart {
-  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
-  font-size: 16px;
-  display: flex;
-  flex-direction: column;
-  height: 420px;
-  color: #222427;
-  border: 1px solid #d9d9d9;
-  border-radius: 5px;
-  background: #fff;
-}
-
-.emoji-mart-bar {
-  border: 0 solid #d9d9d9;
-}
-
-.emoji-mart-bar:first-child {
-  border-bottom-width: 1px;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-
-.emoji-mart-bar:last-child {
-  border-top-width: 1px;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-.emoji-mart-scroll {
-  position: relative;
-  overflow-y: scroll;
-  flex: 1;
-  padding: 0 6px 6px 6px;
-  z-index: 0; /* Fix for rendering sticky positioned category labels on Chrome */
-  will-change: transform; /* avoids "repaints on scroll" in mobile Chrome */
-  -webkit-overflow-scrolling: touch;
-}
-
-</style>
+</script>