From 65e6d3303292881f5922725518cfa5b5912c73f9 Mon Sep 17 00:00:00 2001
From: Sulk <sulk@sulk.com>
Date: Mon, 3 Dec 2018 18:44:29 +0300
Subject: [PATCH 1/3] Update css to latest version

Update css to latest version, taken from https://github.com/missive/emoji-mart/blob/master/css/emoji-mart.css
---
 css/emoji-mart.css | 110 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 100 insertions(+), 10 deletions(-)

diff --git a/css/emoji-mart.css b/css/emoji-mart.css
index 93e62d7b6..2077f09c1 100644
--- a/css/emoji-mart.css
+++ b/css/emoji-mart.css
@@ -72,9 +72,11 @@
   max-width: 22px;
 }
 
-.emoji-mart-anchors svg {
+.emoji-mart-anchors svg,
+.emoji-mart-anchors img {
   fill: currentColor;
-  max-height: 18px;
+  height: 18px;
+  width: 18px;
 }
 
 .emoji-mart-scroll {
@@ -87,17 +89,29 @@
 .emoji-mart-search {
   margin-top: 6px;
   padding: 0 6px;
+  position: relative;
 }
+
 .emoji-mart-search input {
   font-size: 16px;
   display: block;
   width: 100%;
-  padding: .2em .6em;
-  border-radius: 25px;
+  padding: 5px 25px 6px 10px;
+  border-radius: 5px;
   border: 1px solid #d9d9d9;
   outline: 0;
 }
 
+.emoji-mart-search-icon {
+  position: absolute;
+  top: 9px;
+  right: 16px;
+  z-index: 2;
+  padding: 0;
+  border: none;
+  background: none;
+}
+
 .emoji-mart-category .emoji-mart-emoji span {
   z-index: 1;
   position: relative;
@@ -138,12 +152,22 @@
   font-size: 0;
 }
 
+.emoji-mart-emoji-native {
+  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji";
+}
+
 .emoji-mart-no-results {
   font-size: 14px;
   text-align: center;
   padding-top: 70px;
   color: #858585;
 }
+.emoji-mart-no-results-img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 50%;
+}
 .emoji-mart-no-results .emoji-mart-category-label {
   display: none;
 }
@@ -181,6 +205,11 @@
   text-align: right;
 }
 
+.emoji-mart-preview-skins.custom {
+  right: 10px;
+  text-align: right;
+}
+
 .emoji-mart-preview-name {
   font-size: 14px;
 }
@@ -223,12 +252,18 @@
   background-color: #fff;
 }
 
-.emoji-mart-skin-swatches-opened .emoji-mart-skin-swatch {
+.emoji-mart-skin-swatches.custom {
+  font-size: 0;
+  border: none;
+  background-color: #fff;
+}
+
+.emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch {
   width: 16px;
   padding: 0 2px;
 }
 
-.emoji-mart-skin-swatches-opened .emoji-mart-skin-swatch-selected:after {
+.emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch.selected:after {
   opacity: .75;
 }
 
@@ -248,12 +283,13 @@
 .emoji-mart-skin-swatch:nth-child(5) { transition-delay: .12s }
 .emoji-mart-skin-swatch:nth-child(6) { transition-delay: .15s }
 
-.emoji-mart-skin-swatch-selected {
+.emoji-mart-skin-swatch.selected {
   position: relative;
   width: 16px;
   padding: 0 2px;
 }
-.emoji-mart-skin-swatch-selected:after {
+
+.emoji-mart-skin-swatch.selected:after {
   content: "";
   position: absolute;
   top: 50%; left: 50%;
@@ -266,9 +302,63 @@
   transition: opacity .2s ease-out;
 }
 
+.emoji-mart-skin-swatch.custom {
+  display: inline-block;
+  width: 0;
+  height: 38px;
+  overflow: hidden;
+  vertical-align: middle;
+  transition-property: width, height;
+  transition-duration: .125s;
+  transition-timing-function: ease-out;
+  cursor: default;
+}
+
+.emoji-mart-skin-swatch.custom.selected {
+  position: relative;
+  width: 36px;
+  height: 38px;
+  padding: 0 2px 0 0;
+}
+
+.emoji-mart-skin-swatch.custom.selected:after {
+  content: "";
+  width: 0;
+  height: 0;
+}
+
+.emoji-mart-skin-swatches.custom .emoji-mart-skin-swatch.custom:hover {
+  background-color: #f4f4f4;
+  border-radius: 10%;
+}
+
+.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom {
+  width: 36px;
+  height: 38px;
+  padding: 0 2px 0 0;
+}
+
+.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom.selected:after {
+  opacity: .75;
+}
+
+.emoji-mart-skin-text.opened {
+  display: inline-block;
+  vertical-align: middle;
+  text-align: left;
+  color: #888;
+  font-size: 11px;
+  padding: 5px 2px;
+  width: 95px;
+  height: 40px;
+  border-radius: 10%;
+  background-color: #fff;
+}
+
 .emoji-mart-skin {
   display: inline-block;
-  width: 100%; padding-top: 100%;
+  width: 100%;
+  padding-top: 100%;
   max-width: 12px;
   border-radius: 100%;
 }
@@ -278,4 +368,4 @@
 .emoji-mart-skin-tone-3 { background-color: #e0bb95 }
 .emoji-mart-skin-tone-4 { background-color: #bf8f68 }
 .emoji-mart-skin-tone-5 { background-color: #9b643d }
-.emoji-mart-skin-tone-6 { background-color: #594539 }
+.emoji-mart-skin-tone-6 { background-color: #594539 }
\ No newline at end of file

From 0ad972a6eb3f48ee9192b4a09a4121674c586428 Mon Sep 17 00:00:00 2001
From: Sulk <sulk@sulk.com>
Date: Mon, 3 Dec 2018 18:49:02 +0300
Subject: [PATCH 2/3] Remove styling from components and revert back PR#38

Move styling from components, now using css file import instead. Revert back PR #38, tested and debugged, makes emoji picker much more slower so reverting it back.
---
 README.md                              |  3 +
 src/components/anchors.vue             | 53 ---------------
 src/components/category.vue            | 75 --------------------
 src/components/emoji/nimbleEmoji.vue   | 24 ++-----
 src/components/picker/nimblePicker.vue | 94 ++++++--------------------
 src/components/preview.vue             | 65 ------------------
 src/components/search.vue              | 19 ------
 src/components/skins.vue               | 69 -------------------
 8 files changed, 30 insertions(+), 372 deletions(-)

diff --git a/README.md b/README.md
index bf22532d0..06b0bdf2f 100644
--- a/README.md
+++ b/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" />
diff --git a/src/components/anchors.vue b/src/components/anchors.vue
index 7ac4a9b70..5ce38c8ad 100644
--- a/src/components/anchors.vue
+++ b/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>
diff --git a/src/components/category.vue b/src/components/category.vue
index f89823962..50438c6a6 100644
--- a/src/components/category.vue
+++ b/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>
diff --git a/src/components/emoji/nimbleEmoji.vue b/src/components/emoji/nimbleEmoji.vue
index 681f4d1e8..06e2db47a 100644
--- a/src/components/emoji/nimbleEmoji.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/picker/nimblePicker.vue b/src/components/picker/nimblePicker.vue
index 95c64f39f..f2eb5486e 100644
--- a/src/components/picker/nimblePicker.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/preview.vue b/src/components/preview.vue
index 58116a17c..176b69512 100644
--- a/src/components/preview.vue
+++ b/src/components/preview.vue
@@ -114,68 +114,3 @@ export default {
 }
 
 </script>
-
-<style scoped>
-
-.emoji-mart-preview {
-  position: relative;
-  height: 70px;
-}
-
-.emoji-mart-preview-emoji,
-.emoji-mart-preview-data,
-.emoji-mart-preview-skins {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.emoji-mart-preview-emoji {
-  left: 12px;
-}
-
-.emoji-mart-preview-data {
-  left: 68px; right: 12px;
-  word-break: break-all;
-}
-
-.emoji-mart-preview-skins {
-  right: 30px;
-  text-align: right;
-}
-
-.emoji-mart-preview-name {
-  font-size: 14px;
-}
-
-.emoji-mart-preview-shortname {
-  font-size: 12px;
-  color: #888;
-}
-.emoji-mart-preview-shortname + .emoji-mart-preview-shortname,
-.emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,
-.emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {
-  margin-left: .5em;
-}
-
-.emoji-mart-preview-emoticon {
-  font-size: 11px;
-  color: #bbb;
-}
-
-.emoji-mart-title span {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.emoji-mart-title .emoji-mart-emoji {
-  padding: 0;
-}
-
-.emoji-mart-title-label {
-  color: #999A9C;
-  font-size: 21px;
-  font-weight: 300;
-}
-
-</style>
diff --git a/src/components/search.vue b/src/components/search.vue
index ffcac2e17..2f55d57b8 100644
--- a/src/components/search.vue
+++ b/src/components/search.vue
@@ -79,22 +79,3 @@ export default {
 }
 
 </script>
-
-<style scoped>
-
-.emoji-mart-search {
-  margin-top: 6px;
-  padding: 0 6px;
-}
-
-.emoji-mart-search input {
-  font-size: 16px;
-  display: block;
-  width: 100%;
-  padding: .2em .6em;
-  border-radius: 25px;
-  border: 1px solid #d9d9d9;
-  outline: 0;
-}
-
-</style>
diff --git a/src/components/skins.vue b/src/components/skins.vue
index 377026ad1..86caa58ad 100644
--- a/src/components/skins.vue
+++ b/src/components/skins.vue
@@ -36,72 +36,3 @@ export default {
 }
 
 </script>
-
-<style scoped>
-
-.emoji-mart-skin-swatches {
-  font-size: 0;
-  padding: 2px 0;
-  border: 1px solid #d9d9d9;
-  border-radius: 12px;
-  background-color: #fff;
-}
-
-.emoji-mart-skin-swatches-opened .emoji-mart-skin-swatch {
-  width: 16px;
-  padding: 0 2px;
-}
-
-.emoji-mart-skin-swatches-opened .emoji-mart-skin-swatch-selected:after {
-  opacity: .75;
-}
-
-.emoji-mart-skin-swatch {
-  display: inline-block;
-  width: 0;
-  vertical-align: middle;
-  transition-property: width, padding;
-  transition-duration: .125s;
-  transition-timing-function: ease-out;
-}
-
-.emoji-mart-skin-swatch:nth-child(1) { transition-delay: 0s }
-.emoji-mart-skin-swatch:nth-child(2) { transition-delay: .03s }
-.emoji-mart-skin-swatch:nth-child(3) { transition-delay: .06s }
-.emoji-mart-skin-swatch:nth-child(4) { transition-delay: .09s }
-.emoji-mart-skin-swatch:nth-child(5) { transition-delay: .12s }
-.emoji-mart-skin-swatch:nth-child(6) { transition-delay: .15s }
-
-.emoji-mart-skin-swatch-selected {
-  position: relative;
-  width: 16px;
-  padding: 0 2px;
-}
-.emoji-mart-skin-swatch-selected:after {
-  content: "";
-  position: absolute;
-  top: 50%; left: 50%;
-  width: 4px; height: 4px;
-  margin: -2px 0 0 -2px;
-  background-color: #fff;
-  border-radius: 100%;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity .2s ease-out;
-}
-
-.emoji-mart-skin {
-  display: inline-block;
-  width: 100%; padding-top: 100%;
-  max-width: 12px;
-  border-radius: 100%;
-}
-
-.emoji-mart-skin-tone-1 { background-color: #ffc93a }
-.emoji-mart-skin-tone-2 { background-color: #fadcbc }
-.emoji-mart-skin-tone-3 { background-color: #e0bb95 }
-.emoji-mart-skin-tone-4 { background-color: #bf8f68 }
-.emoji-mart-skin-tone-5 { background-color: #9b643d }
-.emoji-mart-skin-tone-6 { background-color: #594539 }
-
-</style>

From 137bfcc284280a6a48858b787f29594ac43270d4 Mon Sep 17 00:00:00 2001
From: Sulk <sulk@sulk.com>
Date: Mon, 3 Dec 2018 18:51:48 +0300
Subject: [PATCH 3/3] Update docs, now using css file

Updating docs, now using css file. Updated webpack version and added copy-webpack-plugin
---
 docs/index.html        | 1 +
 docs/webpack.config.js | 5 ++++-
 package.json           | 3 ++-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index c4b5a078f..7f50313ee 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -15,6 +15,7 @@
         text-align: center;
       }
     </style>
+    <link rel="stylesheet" type="text/css" href="emoji-mart.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/docs/webpack.config.js b/docs/webpack.config.js
index 3c54d4865..0d644ce08 100644
--- a/docs/webpack.config.js
+++ b/docs/webpack.config.js
@@ -1,7 +1,7 @@
 var path = require('path')
 var pack = require('../package.json')
 var webpack = require('webpack')
-
+var CopyWebpackPlugin = require('copy-webpack-plugin')
 var PROD = process.env.NODE_ENV === 'production'
 var TEST = process.env.NODE_ENV === 'test'
 
@@ -52,6 +52,9 @@ var config = {
     new webpack.DefinePlugin({
       EMOJI_DATASOURCE_VERSION: `'${pack.devDependencies['emoji-datasource']}'`,
     }),
+    new CopyWebpackPlugin([
+      'css/emoji-mart.css',
+    ])
   ],
 
   bail: true,
diff --git a/package.json b/package.json
index 741e236ac..46b93cae3 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "6.6.0",
     "babel-runtime": "^6.26.0",
+    "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^0.28.0",
     "emoji-datasource": "4.0.4",
     "emojilib": "^2.2.1",
@@ -55,7 +56,7 @@
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.5.2",
-    "webpack": "^3.6.0",
+    "webpack": "^3.12.0",
     "webpack-dev-server": "^2.9.1"
   },
   "scripts": {