Merge branch 'vue3-again' into vue3-no-compat

* vue3-again:
  fix warning about custom component
  fix?
  fix some issues with trees
  removing uselsess stuff
  fix reset buttons in profile again
  fix spacing in poll expiration label
  registration fixes

build/webpack.base.conf.js

@@ -61,6 +61,16 @@ module.exports = {
       {
         test: /\.vue$/,
         loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            isCustomElement(tag) {
+              if (tag === 'pinch-zoom') {
+                return true
+              }
+              return false
+            }
+          }
+        }
       },
       {
         test: /\.jsx?$/,

src/components/gallery/gallery.vue

@@ -22,7 +22,6 @@
             class="gallery-item"
             :nsfw="nsfw"
             :attachment="attachment"
-            :allow-play="false"
             :size="size"
             :editable="editable"
             :remove="removeAttachment"

src/components/poll/poll.vue

@@ -71,6 +71,7 @@
           {{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }} · 
         </template>
       </div>
+      <span>
         <i18n-t
           scope="global"
           :keypath="expired ? 'polls.expired' : 'polls.expires_in'"
@@ -81,6 +82,7 @@
             :now-threshold="0"
           />
         </i18n-t>
+      </span>
     </div>
   </div>
 </template>

src/components/registration/registration.js

@@ -24,7 +24,7 @@ const registration = {
         password: { required },
         confirm: {
           required,
-          sameAs: sameAs(this.password)
+          sameAs: sameAs(this.user.password)
         },
         reason: { required: requiredIf(() => this.accountApprovalRequired) }
       }
@@ -65,9 +65,9 @@ const registration = {
       this.user.captcha_token = this.captcha.token
       this.user.captcha_answer_data = this.captcha.answer_data
 
-      this.$v.$touch()
+      this.v$.$touch()
 
-      if (!this.$v.$invalid) {
+      if (!this.v$.$invalid) {
         try {
           await this.signUp(this.user)
           this.$router.push({ name: 'friends' })

src/components/settings_modal/tabs/profile_tab.scss

@@ -54,16 +54,20 @@
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
     background-color: rgba(0, 0, 0, 0.6);
     opacity: 0.7;
-    color: white;
     width: 1.5em;
     height: 1.5em;
     text-align: center;
     line-height: 1.5em;
     font-size: 1.5em;
     cursor: pointer;
+
     &:hover {
       opacity: 1;
     }
+
+    svg {
+      color: white;
+    }
   }
 
   .oauth-tokens {

src/components/settings_modal/tabs/profile_tab.vue

@@ -111,9 +111,9 @@
           v-if="!isDefaultAvatar && pickAvatarBtnVisible"
           :title="$t('settings.reset_avatar')"
           @click="resetAvatar"
+          class="button-unstyled reset-button"
         >
           <FAIcon
-            class="reset-button"
             icon="times"
             type="button"
           />
@@ -141,11 +141,11 @@
         <img :src="user.cover_photo">
         <button
           v-if="!isDefaultBanner"
+          class="button-unstyled reset-button"
           :title="$t('settings.reset_profile_banner')"
           @click="resetBanner"
         >
           <FAIcon
-            class="reset-button"
             icon="times"
             type="button"
           />
@@ -183,12 +183,11 @@
         <img :src="user.background_image">
         <button
           v-if="!isDefaultBackground"
-          class="button-unstyled"
+          class="button-unstyled reset-button"
           :title="$t('settings.reset_profile_background')"
           @click="resetBackground"
         >
           <FAIcon
-            class="reset-button"
             icon="times"
             type="button"
           />

src/components/status/status.js

@@ -69,7 +69,7 @@ const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
   const controlledName = `controlled${camelized}`
   const uncontrolledName = `uncontrolled${camelized}`
   res[name] = function () {
-    return (this.$props[toggle] && this[toggle]) ? this[controlledName] : this[uncontrolledName]
+    return ((this.$data[toggle] !== undefined || this.$props[toggle] !== undefined) && this[toggle]) ? this[controlledName] : this[uncontrolledName]
   }
   return res
 }, {})

src/components/status_content/status_content.js

@@ -31,7 +31,7 @@ const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
   const controlledName = `controlled${camelized}`
   const uncontrolledName = `uncontrolled${camelized}`
   res[name] = function () {
-    return (this.$props[toggle] && this[toggle]) ? this[controlledName] : this[uncontrolledName]
+    return ((this.$data[toggle] !== undefined || this.$props[toggle] !== undefined) && this[toggle]) ? this[controlledName] : this[uncontrolledName]
   }
   return res
 }, {})