From fca885e665094b8efcbc65a3f4ec9ba31679c4c2 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 25 Apr 2021 13:23:16 +0300 Subject: [PATCH] resolve TODO VUE3 --- src/components/color_input/color_input.vue | 20 +++++++-------- src/components/emoji_input/emoji_input.js | 23 ++++++++--------- src/components/font_control/font_control.vue | 2 +- .../opacity_input/opacity_input.vue | 4 +-- src/components/range_input/range_input.vue | 6 ++--- .../settings_modal/settings_modal_content.js | 2 +- .../status_popover/status_popover.js | 5 ++-- src/components/tab_switcher/tab_switcher.jsx | 25 ++++++++----------- 8 files changed, 41 insertions(+), 46 deletions(-) diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue index 8fb16113..81462979 100644 --- a/src/components/color_input/color_input.vue +++ b/src/components/color_input/color_input.vue @@ -14,25 +14,25 @@ :checked="present" :disabled="disabled" class="opt" - @change="$emit('input', typeof value === 'undefined' ? fallback : undefined)" + @change="$emit('update:modelValue', typeof value === 'undefined' ? fallback : undefined)" />
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 diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue index dd117ec0..0cee2edc 100644 --- a/src/components/font_control/font_control.vue +++ b/src/components/font_control/font_control.vue @@ -15,7 +15,7 @@ class="opt exlcude-disabled" type="checkbox" :checked="present" - @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)" + @input="$emit('update:modelValue', typeof value === 'undefined' ? fallback : undefined)" >
diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue index 5857a5c1..82681809 100644 --- a/src/components/range_input/range_input.vue +++ b/src/components/range_input/range_input.vue @@ -15,7 +15,7 @@ class="opt" type="checkbox" :checked="present" - @input="$emit('input', !present ? fallback : undefined)" + @input="$emit('update:modelValue', !present ? fallback : undefined)" >
diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js index deb77298..506b52e4 100644 --- a/src/components/settings_modal/settings_modal_content.js +++ b/src/components/settings_modal/settings_modal_content.js @@ -63,7 +63,7 @@ const SettingsModalContent = { const targetTab = this.$store.state.interface.settingsModalTargetTab // We're being told to open in specific tab if (targetTab) { - const tabIndex = this.$refs.tabSwitcher.$slots.default.findIndex(elm => { + const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => { return elm.data && elm.data.attrs['data-tab-name'] === targetTab }) if (tabIndex >= 0) { diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js index c47f5631..e0962ccd 100644 --- a/src/components/status_popover/status_popover.js +++ b/src/components/status_popover/status_popover.js @@ -1,6 +1,7 @@ import { find } from 'lodash' import { library } from '@fortawesome/fontawesome-svg-core' import { faCircleNotch } from '@fortawesome/free-solid-svg-icons' +import { defineAsyncComponent } from 'vue' library.add( faCircleNotch @@ -22,8 +23,8 @@ const StatusPopover = { } }, components: { - Status: () => import('../status/status.vue'), - Popover: () => import('../popover/popover.vue') + Status: defineAsyncComponent(() => import('../status/status.vue')), + Popover: defineAsyncComponent(() => import('../popover/popover.vue')) }, methods: { enter () { diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx index 2869e59c..db82e075 100644 --- a/src/components/tab_switcher/tab_switcher.jsx +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -1,10 +1,11 @@ +// eslint-disable-next-line no-unused +import { h } from 'vue' import { mapState } from 'vuex' import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome' import './tab_switcher.scss' -// TODO VUE3: change data to props -const findFirstUsable = (slots) => slots.findIndex(_ => _.data && _.data.attrs) +const findFirstUsable = (slots) => slots.findIndex(_ => _.props) export default { name: 'TabSwitcher', @@ -42,15 +43,14 @@ export default { }, data () { return { - // TODO VUE3: add () after 'default' - active: findFirstUsable(this.$slots.default) + active: findFirstUsable(this.$slots.default()) } }, computed: { activeIndex () { // In case of controlled component if (this.activeTab) { - return this.$slots.default.findIndex(slot => this.activeTab === slot.key) + return this.$slots.default().findIndex(slot => this.activeTab === slot.key) } else { return this.active } @@ -61,8 +61,7 @@ export default { }, beforeUpdate () { const currentSlot = this.slots()[this.active] - // TODO VUE3: change data to props - if (!currentSlot.data) { + if (!currentSlot.props) { this.active = findFirstUsable(this.slots()) } }, @@ -75,8 +74,7 @@ export default { }, // DO NOT put it to computed, it doesn't work (caching?) slots () { - // TODO VUE3: add () at the end - return this.$slots.default + return this.$slots.default() }, setTab (index) { if (typeof this.onSwitch === 'function') { @@ -88,12 +86,10 @@ export default { } } }, - // TODO VUE3: remove 'h' here - render (h) { + render () { const tabs = this.slots() .map((slot, index) => { - // TODO VUE3 change to slot.props - const props = slot.data && slot.data.attrs + const props = slot.props if (!props) return const classesTab = ['tab', 'button-default'] const classesWrapper = ['tab-wrapper'] @@ -134,8 +130,7 @@ export default { }) const contents = this.slots().map((slot, index) => { - // TODO VUE3 change to slot.props - const props = slot.data && slot.data.attrs + const props = slot.props if (!props) return const active = this.activeIndex === index const classes = [ active ? 'active' : 'hidden' ]