Merge pull request #59 from serebrov/52-optional-vue-virtual-scroller

[#52] optional vue virtual scroller

README.md

@@ -11,7 +11,7 @@ This was the reason to fork and change it, the demo is [here](https://serebrov.g
 Major changes are:
 
 - Reworked emoji index class: use same index (so same data) for all components.
-- Added [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller) for emoji categories
+- Added [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller) for emoji categories (note: there is `StaticPicker` version that doesn't use virtual scroller)
 - Render emojis in categories without `Emoji` component, there are a lot of emojis to render and there is a noticeable slow down even with virtual scrolling when we render a component per emoji.
 - Frozen objects with emoji data to disable Vue change tracking
 - Do not create `EmojiIndex` globally, before it was loaded (along with the emoji data) even when it was not actually used
@@ -357,6 +357,14 @@ let index = new EmojiIndex(data, {
 }
 ```
 
+### StaticPicker
+
+Same as `Picker`, but doesn't use [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller).
+It is a bit slower, but easier to customize (especially, if you need a custom scroll bar style).
+
+Note: `vue-virtual-scroller` also may lead to rendering problems when `Picker` is used inside the dialog (in particluar, QDialog from Quasar Framework).
+The `StaticPicker` might also be useful here, see #57 for other workarounds (disable animation, trigger vue-virtual-scroller update after rendering).
+
 ### Emoji
 
 ```js

css/emoji-mart.css

@@ -75,6 +75,16 @@
   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;
+}
+
 .emoji-mart-anchors {
   display: flex;
   flex-direction: row;
@@ -175,12 +185,15 @@
 }
 
 .emoji-mart-category-label {
-  /* z-index: 2; */
-  /* position: relative; */
-  /* position: -webkit-sticky; */
   position: sticky;
   top: 0;
 }
+.emoji-mart-static .emoji-mart-category-label {
+  z-index: 2;
+  position: relative;
+  /* position: sticky; */
+  /* position: -webkit-sticky; */
+}
 
 .emoji-mart-category-label span {
   display: block;

docs/app.vue

@@ -76,7 +76,11 @@
     <div class="row"></div>
     <h2>Custom Search And Preview Templates Example</h2>
     <div class="row">
-      <Picker :data="index" :native="true">
+      Also here we use "StaticPicker" which does not use virtual scroller (it is
+      slower, but easier to customize with css)
+    </div>
+    <div class="row">
+      <StaticPicker :data="index" :native="true">
         <template slot="searchTemplate" slot-scope="slotProps">
           <input
             type="text"
@@ -109,7 +113,7 @@
             </div>
           </div>
         </template>
-      </Picker>
+      </StaticPicker>
     </div>
 
     <div class="row"></div>
@@ -127,7 +131,7 @@
 
 <script>
 import data from '../data/all.json'
-import { Picker, Emoji, EmojiIndex } from '../src'
+import { Picker, StaticPicker, Emoji, EmojiIndex } from '../src'
 import '../css/emoji-mart.css'
 
 import { QBtn, QDialog } from 'quasar-framework/dist/quasar.mat.esm'
@@ -203,6 +207,7 @@ export default {
   },
   components: {
     Picker,
+    StaticPicker,
     Emoji,
     QBtn,
     QDialog,