From 8fec24a55c1b5eb27e9abbfe894a520398ac4596 Mon Sep 17 00:00:00 2001 From: Boris Serebrov Date: Sat, 30 Jan 2021 18:59:46 +0200 Subject: [PATCH 1/7] Add Vue 3 and v8 note --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index 4020ba13..a09396ec 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,9 @@ Breaking change in v7: switched to Unicode v12 emoji set which results in severa - Removed 'messenger' set - it was [merged](https://github.com/iamcal/emoji-data/blob/master/CHANGES.md#2020-01-10--v500) into 'facebook' set - Changed emoji categories: removed 'Smileys & People', added 'Smileys & Emotions' and 'People & Body' instead +Breaking change in v8: +- The `StaticPicker` component is now default (exported as `Picker`), previous default component renamed to `VirtualScrollPicker` + > The original project has been forked from [emoji-mart](https://www.npmjs.com/package/emoji-mart) which was written for React
@@ -45,6 +48,12 @@ It is also possible to install directly from github (could be useful for forks): Here is the list of [releases](https://github.com/serebrov/emoji-mart-vue/releases). +## Vue 3 Support + +Component works with Vue 3, [here is a simple demo app](https://github.com/serebrov/emoji-mart-vue3-demo). + +See also: #88. + ## Quick Example ``` From 8c4fe3375e48ad9b9262f67f3a23264106449b36 Mon Sep 17 00:00:00 2001 From: Boris Serebrov Date: Sat, 30 Jan 2021 19:02:55 +0200 Subject: [PATCH 2/7] Fix issue link --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a09396ec..36ef3b8c 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ Here is the list of [releases](https://github.com/serebrov/emoji-mart-vue/releas Component works with Vue 3, [here is a simple demo app](https://github.com/serebrov/emoji-mart-vue3-demo). -See also: #88. +See also: [#88](https://github.com/serebrov/emoji-mart-vue/issues/88). ## Quick Example From 49ddae187cdfb459c82f620973f89e846fe2fcc0 Mon Sep 17 00:00:00 2001 From: Boris Serebrov Date: Sat, 30 Jan 2021 19:22:13 +0200 Subject: [PATCH 3/7] Add demo links --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index 36ef3b8c..e5294341 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,11 @@ Breaking change in v8:
+## Demo app + +Live demo app: https://serebrov.github.io/emoji-mart-vue/ +Demo application code is [under the ./docs folder](./docs). + ## Installation Install from npm: `npm install --save emoji-mart-vue-fast`. @@ -52,6 +57,8 @@ Here is the list of [releases](https://github.com/serebrov/emoji-mart-vue/releas Component works with Vue 3, [here is a simple demo app](https://github.com/serebrov/emoji-mart-vue3-demo). +Live demo: https://serebrov.github.io/emoji-mart-vue3-demo/. + See also: [#88](https://github.com/serebrov/emoji-mart-vue/issues/88). ## Quick Example From 7bd360e7029cf88a4e15f6a013c87e41ce1b24b1 Mon Sep 17 00:00:00 2001 From: Boris Serebrov Date: Sat, 30 Jan 2021 19:25:14 +0200 Subject: [PATCH 4/7] Move changelog lower --- README.md | 56 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 30 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index e5294341..0290dbb2 100644 --- a/README.md +++ b/README.md @@ -2,37 +2,14 @@ [![codecov](https://codecov.io/gh/serebrov/emoji-mart-vue/branch/master/graph/badge.svg)](https://codecov.io/gh/serebrov/emoji-mart-vue) -This project is a fork of https://github.com/jm-david/emoji-mart-vue with many performance fixes, tests and some structural code changes. +This project is a fork of https://github.com/jm-david/emoji-mart-vue with many performance fixes, tests and structural code changes. +See the [changelog](#changelog) for details. The original component was [very slow to show/destroy](https://github.com/jm-david/emoji-mart-vue/pull/47), around 2 seconds to show and even a bit longer to destroy, so it was unusable in a popup. This was the reason to fork and change it, the demo is [here](https://serebrov.github.io/emoji-mart-vue/), use the "Show / hide the picker" button to see create/destroy performance -Major changes are: - -- Reworked emoji index class: use same index (so same data) for all components. -- Render emojis in categories without `Emoji` component, there are a lot of emojis to render and there is a noticeable slow down 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 -- Extract CSS into external file, use less inline styles to reduce the amount of generated HTML -- Fixes in CSS for native unicode emojis ported from the [original react project](https://github.com/missive/emoji-mart) -- Excluded ./data/all.json from the js bundle (it was always loaded within the bundle even if it is not needed) -- Updated to babel 7 -- Added tests -- Updated to emojis v12 (see the breaking change note below) - -Breaking change in v6: removed `Emoji` and `Picker` [wrappers](#convenience-wrappers), renamed `NimbleEmoji` to `Emoji` and `NimblePicker` to `Picker`. -See the `Convenience Wrappers` section below for details. - -Breaking change in v7: switched to Unicode v12 emoji set which results in several breaking changes: -- Removed 'emojione' set (removed from [emoji-datasource](https://github.com/iamcal/emoji-data) by [JoyPixels request](https://github.com/iamcal/emoji-data/blob/master/CHANGES.md#2018-07-05--v410)) -- Removed 'messenger' set - it was [merged](https://github.com/iamcal/emoji-data/blob/master/CHANGES.md#2020-01-10--v500) into 'facebook' set -- Changed emoji categories: removed 'Smileys & People', added 'Smileys & Emotions' and 'People & Body' instead - -Breaking change in v8: -- The `StaticPicker` component is now default (exported as `Picker`), previous default component renamed to `VirtualScrollPicker` - -> The original project has been forked from [emoji-mart](https://www.npmjs.com/package/emoji-mart) which was written for React +> The original project has been forked from [emoji-mart](https://www.npmjs.com/package/emoji-mart) which was written for React.

Emoji Mart (Vue) is a Slack-like customizable
emoji picker component for VueJS @@ -687,6 +664,33 @@ export default { **Emoji Mart** doesn’t automatically insert anything into a text input, nor does it show or hide itself. It simply returns an `emoji` object. It’s up to the developer to mount/unmount (it’s fast!) and position the picker. You can use the returned object as props for the `EmojiMart.Emoji` component. You could also use `emoji.colons` to insert text into a textarea or `emoji.native` to use the emoji. +## Changelog + +Major changes comparing to the original emoji-mart-vue: + +- Reworked emoji index class: use same index (so same data) for all components. +- Render emojis in categories without `Emoji` component, there are a lot of emojis to render and there is a noticeable slow down 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 +- Extract CSS into external file, use less inline styles to reduce the amount of generated HTML +- Fixes in CSS for native unicode emojis ported from the [original react project](https://github.com/missive/emoji-mart) +- Excluded ./data/all.json from the js bundle (it was always loaded within the bundle even if it is not needed) +- Updated to babel 7 +- Added tests +- Updated to emojis v12 (see the breaking change note below) + +Breaking change in v6: removed `Emoji` and `Picker` [wrappers](#convenience-wrappers), renamed `NimbleEmoji` to `Emoji` and `NimblePicker` to `Picker`. +See the `Convenience Wrappers` section below for details. + +Breaking change in v7: switched to Unicode v12 emoji set which results in several breaking changes: +- Removed 'emojione' set (removed from [emoji-datasource](https://github.com/iamcal/emoji-data) by [JoyPixels request](https://github.com/iamcal/emoji-data/blob/master/CHANGES.md#2018-07-05--v410)) +- Removed 'messenger' set - it was [merged](https://github.com/iamcal/emoji-data/blob/master/CHANGES.md#2020-01-10--v500) into 'facebook' set +- Changed emoji categories: removed 'Smileys & People', added 'Smileys & Emotions' and 'People & Body' instead + +Breaking change in v8: +- The `StaticPicker` component is now default (exported as `Picker`), previous default component renamed to `VirtualScrollPicker` + + ## Development Build the component and the demo app. From 427e25c52e1f302d2eb0d0ec7d88299e34e6a728 Mon Sep 17 00:00:00 2001 From: Boris Serebrov Date: Sat, 30 Jan 2021 20:20:50 +0200 Subject: [PATCH 5/7] Move not opinionated section higher --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 0290dbb2..64168fdb 100644 --- a/README.md +++ b/README.md @@ -93,6 +93,9 @@ export default { ``` +## Not opinionated + +**Emoji Mart** doesn’t automatically insert anything into a text input, nor does it show or hide itself. It simply returns an `emoji` object. It’s up to the developer to mount/unmount (it’s fast!) and position the picker. You can use the returned object as props for the `EmojiMart.Emoji` component. You could also use `emoji.colons` to insert text into a textarea or `emoji.native` to use the emoji. ## Components @@ -660,10 +663,6 @@ export default { ``` -## Not opinionated - -**Emoji Mart** doesn’t automatically insert anything into a text input, nor does it show or hide itself. It simply returns an `emoji` object. It’s up to the developer to mount/unmount (it’s fast!) and position the picker. You can use the returned object as props for the `EmojiMart.Emoji` component. You could also use `emoji.colons` to insert text into a textarea or `emoji.native` to use the emoji. - ## Changelog Major changes comparing to the original emoji-mart-vue: From e40b21c5a88fde689ca5dfe9bbaf115ed91d12f9 Mon Sep 17 00:00:00 2001 From: Boris Serebrov Date: Sun, 31 Jan 2021 21:42:05 +0200 Subject: [PATCH 6/7] Fix error on scroll and anchor click --- spec/picker-spec.js | 18 ++++++++++++------ src/components/Picker.vue | 35 ++++++++++++++++++++++------------- 2 files changed, 34 insertions(+), 19 deletions(-) diff --git a/spec/picker-spec.js b/spec/picker-spec.js index 1ee158d9..bbfbe85a 100644 --- a/spec/picker-spec.js +++ b/spec/picker-spec.js @@ -42,10 +42,7 @@ describe('Picker', () => { }) it('renders 10 categories', () => { - // Due to the virtual scroller, not all the categories - // are rendered at once let categories = picker.findAll(Category) - // StaticPicker change (8 -> 10) expect(categories.length).toBe(11) // Hidden category with search results expect(categories.at(0).vm.name).toBe('Search') @@ -57,7 +54,6 @@ describe('Picker', () => { expect(categories.at(6).vm.name).toBe('Activities') expect(categories.at(7).vm.name).toBe('Travel & Places') expect(categories.at(8).vm.name).toBe('Objects') - // StaticPicker change (Symbols and Flags) expect(categories.at(9).vm.name).toBe('Symbols') expect(categories.at(10).vm.name).toBe('Flags') }) @@ -207,21 +203,31 @@ describe('anchors', () => { ]) }) - it('can be clicked to scroll to the category', () => { + it('can be clicked to scroll to the category', async () => { let anchors = picker.find(Anchors) let anchorsCategories = anchors.findAll('span.emoji-mart-anchor') let symbols = anchorsCategories.at(8) expect(symbols.element.attributes['data-title'].value).toBe('Symbols') + // The `recent` category is selected initially. + expect(picker.vm.activeCategory.id).toBe('recent') + expect(anchors.vm.activeCategory.id).toBe('recent') + symbols.trigger('click') let events = anchors.emitted().click expect(events.length).toBe(1) + let category = events[0][0] expect(category.id).toBe('symbols') expect(category.name).toBe('Symbols') - // StaticPicker change - the check below fails (although works in demo app) + await picker.vm.$nextTick() + + // Picker change - the check below fails (although works in demo app) + // scrollTop if 0 for all categories and activeCategory is changed in the + // onScroll handler, need to find a way to thes this. + // expect(picker.vm.activeCategory.id).toBe('symbols') // expect(anchors.vm.activeCategory.id).toBe('symbols') }) }) diff --git a/src/components/Picker.vue b/src/components/Picker.vue index 5cd4b30b..93c3c133 100644 --- a/src/components/Picker.vue +++ b/src/components/Picker.vue @@ -197,11 +197,11 @@ export default { }, onScrollPaint() { this.waitingForPaint = false - let scrollTop = this.$refs.scroll.scrollTop, - activeCategory = this.filteredCategories[0] + let scrollTop = this.$refs.scroll.scrollTop + let activeCategory = this.filteredCategories[0] for (let i = 0, l = this.filteredCategories.length; i < l; i++) { - let category = this.filteredCategories[i], - component = this.$refs['categories_' + i] + let category = this.filteredCategories[i] + let component = this.getCategoryComponent(i) // The `-50` offset switches active category (selected in the // anchors bar) a bit eariler, before it actually reaches the top. if (component && component.$el.offsetTop - 50 > scrollTop) { @@ -216,17 +216,17 @@ export default { // No categories are shown when search is active. return } - let i = this.filteredCategories.indexOf(category), - component = this.$refs['categories_' + i], - scrollToComponent = () => { - if (component) { - let top = component.$el.offsetTop - if (category.first) { - top = 0 - } - this.$refs.scroll.scrollTop = top + let i = this.filteredCategories.indexOf(category) + let component = this.getCategoryComponent(i) + let scrollToComponent = () => { + if (component) { + let top = component.$el.offsetTop + if (category.first) { + top = 0 } + this.$refs.scroll.scrollTop = top } + } if (this.infiniteScroll) { scrollToComponent() } else { @@ -253,6 +253,15 @@ export default { this.$emit('skin-change', skin) }, + getCategoryComponent(index) { + let component = this.$refs['categories_' + index] + if ('0' in component) { + // Vue 2 has $refs under v-for as an array. + return component['0'] + } + // Vue 3 does not support $refs as array. + return component + }, }, components: { Anchors, From 325a2d6d6a545104b189a45ed8de27f1f2c4073a Mon Sep 17 00:00:00 2001 From: Boris Serebrov Date: Sun, 31 Jan 2021 21:45:34 +0200 Subject: [PATCH 7/7] Update version to 8.0.2 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 11a61e10..7c4a037a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "emoji-mart-vue-fast", - "version": "8.0.1", + "version": "8.0.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 5f8db7aa..29b317aa 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "emoji-mart-vue-fast", - "version": "8.0.1", + "version": "8.0.2", "description": "Customizable Slack-like emoji picker for VueJS, fast version", "main": "dist/emoji-mart.js", "repository": {