Merge branch 'vue3compat-tabswitcher' into vue3-again

* vue3compat-tabswitcher:
  small refactoring to uncouple tab-switcher from settings modal
  fix theme tab, remove console.logs
  Changed some of TabSwitcher's internals for easier Vue3 migration

src/components/settings_modal/settings_modal_content.js

@@ -1,4 +1,4 @@
-import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 
 import DataImportExportTab from './tabs/data_import_export_tab.vue'
 import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
@@ -53,6 +53,9 @@ const SettingsModalContent = {
     },
     open () {
       return this.$store.state.interface.settingsModalState !== 'hidden'
+    },
+    bodyLock () {
+      return this.$store.state.interface.settingsModalState === 'visible'
     }
   },
   methods: {

src/components/settings_modal/settings_modal_content.vue

@@ -4,6 +4,7 @@
     class="settings_tab-switcher"
     :side-tab-bar="true"
     :scrollable-tabs="true"
+    :body-scroll-lock="bodyLock"
   >
     <div
       :label="$t('settings.general')"

src/components/settings_modal/tabs/mutes_and_blocks_tab.js

@@ -2,7 +2,7 @@ import get from 'lodash/get'
 import map from 'lodash/map'
 import reject from 'lodash/reject'
 import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
-import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import BlockCard from 'src/components/block_card/block_card.vue'
 import MuteCard from 'src/components/mute_card/mute_card.vue'
 import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue'

src/components/settings_modal/tabs/theme_tab/theme_tab.js

@@ -34,7 +34,7 @@ import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
 import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
 import FontControl from 'src/components/font_control/font_control.vue'
 import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
-import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 
 import Preview from './preview.vue'

src/components/sticker_picker/sticker_picker.js

@@ -1,6 +1,6 @@
 /* eslint-env browser */
 import statusPosterService from '../../services/status_poster/status_poster.service.js'
-import TabSwitcher from '../tab_switcher/tab_switcher.js'
+import TabSwitcher from '../tab_switcher/tab_switcher.jsx'
 
 const StickerPicker = {
   components: {

src/components/tab_switcher/tab_switcher.jsx

@@ -1,10 +1,12 @@
-import Vue from 'vue'
 import { mapState } from 'vuex'
 import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
 
 import './tab_switcher.scss'
 
-export default Vue.component('tab-switcher', {
+// TODO VUE3: change data to props
+const findFirstUsable = (slots) => slots.findIndex(_ => _.data && _.data.attrs)
+
+export default {
   name: 'TabSwitcher',
   props: {
     renderOnlyFocused: {
@@ -31,11 +33,17 @@ export default Vue.component('tab-switcher', {
       required: false,
       type: Boolean,
       default: false
+    },
+    bodyScrollLock: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   data () {
     return {
-      active: this.$slots.default.findIndex(_ => _.tag)
+      // TODO VUE3: add () after 'default'
+      active: findFirstUsable(this.$slots.default)
     }
   },
   computed: {
@@ -47,17 +55,15 @@ export default Vue.component('tab-switcher', {
         return this.active
       }
     },
-    settingsModalVisible () {
-      return this.settingsModalState === 'visible'
-    },
     ...mapState({
       settingsModalState: state => state.interface.settingsModalState
     })
   },
   beforeUpdate () {
-    const currentSlot = this.$slots.default[this.active]
+    const currentSlot = this.slots()[this.active]
-    if (!currentSlot.tag) {
+    // TODO VUE3: change data to props
-      this.active = this.$slots.default.findIndex(_ => _.tag)
+    if (!currentSlot.data) {
+      this.active = findFirstUsable(this.slots())
     }
   },
   methods: {
@@ -67,9 +73,14 @@ export default Vue.component('tab-switcher', {
         this.setTab(index)
       }
     },
+    // DO NOT put it to computed, it doesn't work (caching?)
+    slots () {
+      // TODO VUE3: add () at the end
+      return this.$slots.default
+    },
     setTab (index) {
       if (typeof this.onSwitch === 'function') {
-        this.onSwitch.call(null, this.$slots.default[index].key)
+        this.onSwitch.call(null, this.slots()[index].key)
       }
       this.active = index
       if (this.scrollableTabs) {
@@ -77,27 +88,30 @@ export default Vue.component('tab-switcher', {
       }
     }
   },
+  // TODO VUE3: remove 'h' here
   render (h) {
-    const tabs = this.$slots.default
+    const tabs = this.slots()
       .map((slot, index) => {
-        if (!slot.tag) return
+        // TODO VUE3 change to slot.props
+        const props = slot.data && slot.data.attrs
+        if (!props) return
         const classesTab = ['tab', 'button-default']
         const classesWrapper = ['tab-wrapper']
         if (this.activeIndex === index) {
           classesTab.push('active')
           classesWrapper.push('active')
         }
-        if (slot.data.attrs.image) {
+        if (props.image) {
           return (
             <div class={classesWrapper.join(' ')}>
               <button
-                disabled={slot.data.attrs.disabled}
+                disabled={props.disabled}
                 onClick={this.clickTab(index)}
                 class={classesTab.join(' ')}
                 type="button"
               >
-                <img src={slot.data.attrs.image} title={slot.data.attrs['image-tooltip']}/>
+                <img src={props.image} title={props['image-tooltip']}/>
-                {slot.data.attrs.label ? '' : slot.data.attrs.label}
+                {props.label ? '' : props.label}
               </button>
             </div>
           )
@@ -105,25 +119,27 @@ export default Vue.component('tab-switcher', {
         return (
           <div class={classesWrapper.join(' ')}>
             <button
-              disabled={slot.data.attrs.disabled}
+              disabled={props.disabled}
               onClick={this.clickTab(index)}
               class={classesTab.join(' ')}
               type="button"
             >
-              {!slot.data.attrs.icon ? '' : (<FAIcon class="tab-icon" size="2x" fixed-width icon={slot.data.attrs.icon}/>)}
+              {!props.icon ? '' : (<FAIcon class="tab-icon" size="2x" fixed-width icon={props.icon}/>)}
               <span class="text">
-                {slot.data.attrs.label}
+                {props.label}
               </span>
             </button>
           </div>
         )
       })
 
-    const contents = this.$slots.default.map((slot, index) => {
+    const contents = this.slots().map((slot, index) => {
-      if (!slot.tag) return
+      // TODO VUE3 change to slot.props
+      const props = slot.data && slot.data.attrs
+      if (!props) return
       const active = this.activeIndex === index
       const classes = [ active ? 'active' : 'hidden' ]
-      if (slot.data.attrs.fullHeight) {
+      if (props.fullHeight) {
         classes.push('full-height')
       }
       const renderSlot = (!this.renderOnlyFocused || active)
@@ -134,7 +150,7 @@ export default Vue.component('tab-switcher', {
         <div class={classes}>
           {
             this.sideTabBar
-              ? <h1 class="mobile-label">{slot.data.attrs.label}</h1>
+              ? <h1 class="mobile-label">{props.label}</h1>
               : ''
           }
           {renderSlot}
@@ -147,10 +163,14 @@ export default Vue.component('tab-switcher', {
         <div class="tabs">
           {tabs}
         </div>
-        <div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock={this.settingsModalVisible}>
+        <div
+          ref="contents"
+          class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}
+          v-body-scroll-lock={this.bodyScrollLock}
+        >
           {contents}
         </div>
       </div>
     )
   }
-})
+}

src/components/user_profile/user_profile.js

@@ -3,7 +3,7 @@ import UserCard from '../user_card/user_card.vue'
 import FollowCard from '../follow_card/follow_card.vue'
 import Timeline from '../timeline/timeline.vue'
 import Conversation from '../conversation/conversation.vue'
-import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import List from '../list/list.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
 import { library } from '@fortawesome/fontawesome-svg-core'