From fca885e665094b8efcbc65a3f4ec9ba31679c4c2 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 25 Apr 2021 13:23:16 +0300 Subject: resolve TODO VUE3 --- src/components/emoji_input/emoji_input.js | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) (limited to 'src/components/emoji_input/emoji_input.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index c4d235c0..389b6787 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -57,8 +57,7 @@ const EmojiInput = { required: true, type: Function }, - // TODO VUE3: change to modelValue, change 'input' event to 'input' - value: { + modelValue: { /** * Used for v-model */ @@ -137,8 +136,8 @@ const EmojiInput = { return (this.wordAtCaret || {}).word || '' }, wordAtCaret () { - if (this.value && this.caret) { - const word = Completion.wordAtPosition(this.value, this.caret - 1) || {} + if (this.modelValue && this.caret) { + const word = Completion.wordAtPosition(this.modelValue, this.caret - 1) || {} return word } } @@ -225,13 +224,13 @@ const EmojiInput = { } }, replace (replacement) { - const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement) - this.$emit('input', newValue) + const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement) + this.$emit('update:modelValue', newValue) this.caret = 0 }, insert ({ insertion, keepOpen, surroundingSpace = true }) { - const before = this.value.substring(0, this.caret) || '' - const after = this.value.substring(this.caret) || '' + const before = this.modelValue.substring(0, this.caret) || '' + const after = this.modelValue.substring(this.caret) || '' /* Using a bit more smart approach to padding emojis with spaces: * - put a space before cursor if there isn't one already, unless we @@ -259,7 +258,7 @@ const EmojiInput = { after ].join('') this.keepOpen = keepOpen - this.$emit('input', newValue) + this.$emit('update:modelValue', newValue) const position = this.caret + (insertion + spaceAfter + spaceBefore).length if (!keepOpen) { this.input.focus() @@ -278,8 +277,8 @@ const EmojiInput = { if (len > 0 || suggestion) { const chosenSuggestion = suggestion || this.suggestions[this.highlighted] const replacement = chosenSuggestion.replacement - const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement) - this.$emit('input', newValue) + const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement) + this.$emit('update:modelValue', newValue) this.highlighted = 0 const position = this.wordAtCaret.start + replacement.length @@ -455,7 +454,7 @@ const EmojiInput = { this.showPicker = false this.setCaret(e) this.resize() - this.$emit('input', e.target.value) + this.$emit('update:modelValue', e.target.value) }, onClickInput (e) { this.showPicker = false -- cgit v1.2.3-70-g09d2 From 051d51bcd92530e5aff0c3e47f26b26695af7843 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 17 Mar 2022 09:28:19 +0200 Subject: fix suggest not working --- package.json | 2 +- src/boot/after_store.js | 11 ++++++++--- src/components/emoji_input/emoji_input.js | 1 + yarn.lock | 10 +++++----- 4 files changed, 15 insertions(+), 9 deletions(-) (limited to 'src/components/emoji_input/emoji_input.js') diff --git a/package.json b/package.json index 4f494324..4bcd4853 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "portal-vue": "2.1.7", "punycode.js": "2.1.0", "ruffle-mirror": "2021.4.11", - "v-click-outside": "2.1.5", + "click-outside-vue3": "4.0.1", "vue": "^3.1.0", "@vue/compat": "^3.1.0", "vue-i18n": "9.1.9", diff --git a/src/boot/after_store.js b/src/boot/after_store.js index e0d7aa0f..5ddc7465 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -1,6 +1,6 @@ -import { createApp } from 'vue' +import { createApp, configureCompat } from 'vue' import { createRouter, createWebHistory } from 'vue-router' -import VueClickOutside from 'v-click-outside' +import vClickOutside from 'click-outside-vue3' import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome' @@ -15,6 +15,11 @@ import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' import { applyTheme } from '../services/style_setter/style_setter.js' import FaviconService from '../services/favicon_service/favicon_service.js' +// disable compat for certain features +configureCompat({ + COMPONENT_V_MODEL: false +}) + let staticInitialResults = null const parsedInitialResults = () => { @@ -390,7 +395,7 @@ const afterStoreSetup = async ({ store, i18n }) => { app.use(store) app.use(i18n) - app.use(VueClickOutside) + app.use(vClickOutside) app.use(VBodyScrollLock) app.component('FAIcon', FontAwesomeIcon) diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index c836317a..5b51da18 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -31,6 +31,7 @@ library.add( */ const EmojiInput = { + emits: ['update:modelValue'], props: { suggest: { /** diff --git a/yarn.lock b/yarn.lock index bcd8d06f..4af18daa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2731,6 +2731,11 @@ cli-width@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639" +click-outside-vue3@4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/click-outside-vue3/-/click-outside-vue3-4.0.1.tgz#81a6ac01696b301764b42db6fdbdf28e7cd8ef95" + integrity sha512-sbplNecrup5oGqA3o4bo8XmvHRT6q9fvw21Z67aDbTqB9M6LF7CuYLTlLvNtOgKU6W3zst5H5zJuEh4auqA34g== + cliui@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1" @@ -9639,11 +9644,6 @@ uuid@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131" -v-click-outside@2.1.5: - version "2.1.5" - resolved "https://registry.yarnpkg.com/v-click-outside/-/v-click-outside-2.1.5.tgz#aa69172fb41fcc79b26b9a4bc72a30ccf03f7a3c" - integrity sha512-VPNCOTZK6WZy73lcWc+R7IW1uaBFEO3/Csrs5CzWVOdvE30V8Y1+BE/BtTlcEmeDGx0eqdE7bSCg55Jj37PMJg== - v8-compile-cache@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz#54bc3cdd43317bca91e35dcaf305b1a7237de745" -- cgit v1.2.3-70-g09d2 From 9d7a7e2019601dd1f7877d8fce2a07c5e459941e Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 22 Mar 2022 18:14:56 +0200 Subject: fix emoji input tests --- src/components/emoji_input/emoji_input.js | 7 ++- test/unit/specs/components/emoji_input.spec.js | 78 ++++++++++++++------------ 2 files changed, 48 insertions(+), 37 deletions(-) (limited to 'src/components/emoji_input/emoji_input.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 5b51da18..e772bf75 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -189,8 +189,11 @@ const EmojiInput = { img: imageUrl || '' })) }, - suggestions (newValue) { - this.$nextTick(this.resize) + suggestions: { + handler (newValue) { + this.$nextTick(this.resize) + }, + deep: true } }, methods: { diff --git a/test/unit/specs/components/emoji_input.spec.js b/test/unit/specs/components/emoji_input.spec.js index 045b47fd..6188308e 100644 --- a/test/unit/specs/components/emoji_input.spec.js +++ b/test/unit/specs/components/emoji_input.spec.js @@ -1,108 +1,116 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils' +import { h } from 'vue' +import { shallowMount } from '@vue/test-utils' import EmojiInput from 'src/components/emoji_input/emoji_input.vue' +import vClickOutside from 'click-outside-vue3' const generateInput = (value, padEmoji = true) => { - const localVue = createLocalVue() - localVue.directive('click-outside', () => {}) const wrapper = shallowMount(EmojiInput, { - propsData: { - suggest: () => [], - enableEmojiPicker: true, - value - }, - mocks: { - $store: { - getters: { - mergedConfig: { - padEmoji + global: { + renderStubDefaultSlot: true, + mocks: { + $store: { + getters: { + mergedConfig: { + padEmoji + } } } + }, + stubs: { + FAIcon: true + }, + directives: { + 'click-outside': vClickOutside } }, - slots: { - default: '' + props: { + suggest: () => [], + enableEmojiPicker: true, + modelValue: value }, - localVue + slots: { + 'default': () => h('input', '') + } }) - return [wrapper, localVue] + return wrapper } describe('EmojiInput', () => { describe('insertion mechanism', () => { it('inserts string at the end with trailing space', () => { const initialString = 'Testing' - const [wrapper] = generateInput(initialString) + const wrapper = generateInput(initialString) const input = wrapper.find('input') input.setValue(initialString) wrapper.setData({ caret: initialString.length }) wrapper.vm.insert({ insertion: '(test)', keepOpen: false }) - const inputEvents = wrapper.emitted().input + const inputEvents = wrapper.emitted()['update:modelValue'] expect(inputEvents[inputEvents.length - 1][0]).to.eql('Testing (test) ') }) it('inserts string at the end with trailing space (source has a trailing space)', () => { const initialString = 'Testing ' - const [wrapper] = generateInput(initialString) + const wrapper = generateInput(initialString) const input = wrapper.find('input') input.setValue(initialString) wrapper.setData({ caret: initialString.length }) wrapper.vm.insert({ insertion: '(test)', keepOpen: false }) - const inputEvents = wrapper.emitted().input + const inputEvents = wrapper.emitted()['update:modelValue'] expect(inputEvents[inputEvents.length - 1][0]).to.eql('Testing (test) ') }) it('inserts string at the begginning without leading space', () => { const initialString = 'Testing' - const [wrapper] = generateInput(initialString) + const wrapper = generateInput(initialString) const input = wrapper.find('input') input.setValue(initialString) wrapper.setData({ caret: 0 }) wrapper.vm.insert({ insertion: '(test)', keepOpen: false }) - const inputEvents = wrapper.emitted().input + const inputEvents = wrapper.emitted()['update:modelValue'] expect(inputEvents[inputEvents.length - 1][0]).to.eql('(test) Testing') }) it('inserts string between words without creating extra spaces', () => { const initialString = 'Spurdo Sparde' - const [wrapper] = generateInput(initialString) + const wrapper = generateInput(initialString) const input = wrapper.find('input') input.setValue(initialString) wrapper.setData({ caret: 6 }) wrapper.vm.insert({ insertion: ':ebin:', keepOpen: false }) - const inputEvents = wrapper.emitted().input + const inputEvents = wrapper.emitted()['update:modelValue'] expect(inputEvents[inputEvents.length - 1][0]).to.eql('Spurdo :ebin: Sparde') }) it('inserts string between words without creating extra spaces (other caret)', () => { const initialString = 'Spurdo Sparde' - const [wrapper] = generateInput(initialString) + const wrapper = generateInput(initialString) const input = wrapper.find('input') input.setValue(initialString) wrapper.setData({ caret: 7 }) wrapper.vm.insert({ insertion: ':ebin:', keepOpen: false }) - const inputEvents = wrapper.emitted().input + const inputEvents = wrapper.emitted()['update:modelValue'] expect(inputEvents[inputEvents.length - 1][0]).to.eql('Spurdo :ebin: Sparde') }) it('inserts string without any padding if padEmoji setting is set to false', () => { const initialString = 'Eat some spam!' - const [wrapper] = generateInput(initialString, false) + const wrapper = generateInput(initialString, false) const input = wrapper.find('input') input.setValue(initialString) wrapper.setData({ caret: initialString.length, keepOpen: false }) wrapper.vm.insert({ insertion: ':spam:' }) - const inputEvents = wrapper.emitted().input + const inputEvents = wrapper.emitted()['update:modelValue'] expect(inputEvents[inputEvents.length - 1][0]).to.eql('Eat some spam!:spam:') }) it('correctly sets caret after insertion at beginning', (done) => { const initialString = '1234' - const [wrapper, vue] = generateInput(initialString) + const wrapper = generateInput(initialString) const input = wrapper.find('input') input.setValue(initialString) wrapper.setData({ caret: 0 }) wrapper.vm.insert({ insertion: '1234', keepOpen: false }) - vue.nextTick(() => { + wrapper.vm.$nextTick(() => { expect(wrapper.vm.caret).to.eql(5) done() }) @@ -110,12 +118,12 @@ describe('EmojiInput', () => { it('correctly sets caret after insertion at end', (done) => { const initialString = '1234' - const [wrapper, vue] = generateInput(initialString) + const wrapper = generateInput(initialString) const input = wrapper.find('input') input.setValue(initialString) wrapper.setData({ caret: initialString.length }) wrapper.vm.insert({ insertion: '1234', keepOpen: false }) - vue.nextTick(() => { + wrapper.vm.$nextTick(() => { expect(wrapper.vm.caret).to.eql(10) done() }) @@ -123,12 +131,12 @@ describe('EmojiInput', () => { it('correctly sets caret after insertion if padEmoji setting is set to false', (done) => { const initialString = '1234' - const [wrapper, vue] = generateInput(initialString, false) + const wrapper = generateInput(initialString, false) const input = wrapper.find('input') input.setValue(initialString) wrapper.setData({ caret: initialString.length }) wrapper.vm.insert({ insertion: '1234', keepOpen: false }) - vue.nextTick(() => { + wrapper.vm.$nextTick(() => { expect(wrapper.vm.caret).to.eql(8) done() }) -- cgit v1.2.3-70-g09d2 From c3690b456e66585598f05d71643089a5e9770af7 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 30 Mar 2022 01:24:53 +0300 Subject: fix emoji input warning spam --- src/components/emoji_input/emoji_input.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/emoji_input/emoji_input.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index e772bf75..391cc5b5 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -31,7 +31,7 @@ library.add( */ const EmojiInput = { - emits: ['update:modelValue'], + emits: ['update:modelValue', 'shown'], props: { suggest: { /** -- cgit v1.2.3-70-g09d2