resolve TODO VUE3

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)"
     />
     <div class="input color-input-field">
       <input
         :id="name + '-t'"
         class="textColor unstyled"
         type="text"
-        :value="value || fallback"
+        :value="modelValue || fallback"
         :disabled="!present || disabled"
-        @input="$emit('input', $event.target.value)"
+        @input="$emit('update:modelValue', $event.target.value)"
       >
       <input
         v-if="validColor"
         :id="name"
         class="nativeColor unstyled"
         type="color"
-        :value="value || fallback"
+        :value="modelValue || fallback"
         :disabled="!present || disabled"
-        @input="$emit('input', $event.target.value)"
+        @input="$emit('update:modelValue', $event.target.value)"
       >
       <div
         v-if="transparentColor"
@@ -67,7 +67,7 @@ export default {
     },
     // Color value, should be required but vue cannot tell the difference
     // between "property missing" and "property set to undefined"
-    value: {
+    modelValue: {
       required: false,
       type: String,
       default: undefined
@@ -93,16 +93,16 @@ export default {
   },
   computed: {
     present () {
-      return typeof this.value !== 'undefined'
+      return typeof this.modelValue !== 'undefined'
     },
     validColor () {
-      return hex2rgb(this.value || this.fallback)
+      return hex2rgb(this.modelValue || this.fallback)
     },
     transparentColor () {
-      return this.value === 'transparent'
+      return this.modelValue === 'transparent'
     },
     computedColor () {
-      return this.value && this.value.startsWith('--')
+      return this.modelValue && this.modelValue.startsWith('--')
     }
   }
 }

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'
+    modelValue: {
-    value: {
       /**
        * Used for v-model
        */
@@ -137,8 +136,8 @@ const EmojiInput = {
       return (this.wordAtCaret || {}).word || ''
     },
     wordAtCaret () {
-      if (this.value && this.caret) {
+      if (this.modelValue && this.caret) {
-        const word = Completion.wordAtPosition(this.value, this.caret - 1) || {}
+        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)
+      const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
-      this.$emit('input', newValue)
+      this.$emit('update:modelValue', newValue)
       this.caret = 0
     },
     insert ({ insertion, keepOpen, surroundingSpace = true }) {
-      const before = this.value.substring(0, this.caret) || ''
+      const before = this.modelValue.substring(0, this.caret) || ''
-      const after = this.value.substring(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)
+        const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
-        this.$emit('input', newValue)
+        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

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)"
     >
     <label
       v-if="typeof fallback !== 'undefined'"

src/components/opacity_input/opacity_input.vue

@@ -14,7 +14,7 @@
       :checked="present"
       :disabled="disabled"
       class="opt"
-      @change="$emit('input', !present ? fallback : undefined)"
+      @change="$emit('update:modelValue', !present ? fallback : undefined)"
     />
     <input
       :id="name"
@@ -25,7 +25,7 @@
       max="1"
       min="0"
       step=".05"
-      @input="$emit('input', $event.target.value)"
+      @input="$emit('update:modelValue', $event.target.value)"
     >
   </div>
 </template>

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)"
     >
     <label
       v-if="typeof fallback !== 'undefined'"
@@ -31,7 +31,7 @@
       :max="max || hardMax || 100"
       :min="min || hardMin || 0"
       :step="step || 1"
-      @input="$emit('input', $event.target.value)"
+      @input="$emit('update:modelValue', $event.target.value)"
     >
     <input
       :id="name"
@@ -42,7 +42,7 @@
       :max="hardMax"
       :min="hardMin"
       :step="step || 1"
-      @input="$emit('input', $event.target.value)"
+      @input="$emit('update:modelValue', $event.target.value)"
     >
   </div>
 </template>

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) {

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'),
+    Status: defineAsyncComponent(() => import('../status/status.vue')),
-    Popover: () => import('../popover/popover.vue')
+    Popover: defineAsyncComponent(() => import('../popover/popover.vue'))
   },
   methods: {
     enter () {

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(_ => _.props)
-const findFirstUsable = (slots) => slots.findIndex(_ => _.data && _.data.attrs)
 
 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.props) {
-    if (!currentSlot.data) {
       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 () {
-  render (h) {
     const tabs = this.slots()
       .map((slot, index) => {
-        // TODO VUE3 change to slot.props
+        const props = slot.props
-        const props = slot.data && slot.data.attrs
         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.props
-      const props = slot.data && slot.data.attrs
       if (!props) return
       const active = this.activeIndex === index
       const classes = [ active ? 'active' : 'hidden' ]