Merge branch 'vue3-again' into shigusegubu-vue3

* vue3-again:
  fix optional color inputs
  fix opacity control
  fix font control
  fix (You) spacing
  fix shadow control in theme tab
  fix (roundness) ranges in theme tab

src/components/color_input/color_input.vue

@@ -14,7 +14,7 @@
       :modelValue="present"
       :disabled="disabled"
       class="opt"
-      @change="$emit('update:modelValue', typeof value === 'undefined' ? fallback : undefined)"
+      @update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
     />
     <div class="input color-input-field">
       <input
@@ -91,6 +91,7 @@ export default {
       default: true
     }
   },
+  emits: ['update:modelValue'],
   computed: {
     present () {
       return typeof this.modelValue !== 'undefined'

src/components/font_control/font_control.js

@@ -6,11 +6,12 @@ export default {
     Select
   },
   props: [
-    'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
+    'name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'
   ],
+  emits: ['update:modelValue'],
   data () {
     return {
-      lValue: this.value,
+      lValue: this.modelValue,
       availableOptions: [
         this.noInherit ? '' : 'inherit',
         'custom',
@@ -22,7 +23,7 @@ export default {
     }
   },
   beforeUpdate () {
-    this.lValue = this.value
+    this.lValue = this.modelValue
   },
   computed: {
     present () {
@@ -37,7 +38,7 @@ export default {
       },
       set (v) {
         set(this.lValue, 'family', v)
-        this.$emit('input', this.lValue)
+        this.$emit('update:modelValue', this.lValue)
       }
     },
     isCustom () {

src/components/font_control/font_control.vue

@@ -14,8 +14,8 @@
       :id="name + '-o'"
       class="opt exlcude-disabled"
       type="checkbox"
-      :modelValue="present"
-      @input="$emit('update:modelValue', typeof value === 'undefined' ? fallback : undefined)"
+      :checked="present"
+      @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
     >
     <label
       v-if="typeof fallback !== 'undefined'"

src/components/mention_link/mention_link.vue

@@ -41,10 +41,12 @@
           class="serverName"
           :class="{ '-faded': shouldFadeDomain }"
           v-html="'@' + serverName"
-        /></span><span
+        />
+        </span>
+        <span
           v-if="isYou && shouldShowYous"
           :class="{ '-you': shouldBoldenYou }"
-        > {{ $t('status.you') }}</span>
+        > {{ ' ' + $t('status.you') }}</span>
         <!-- eslint-enable vue/no-v-html -->
       </a><span
         v-if="shouldShowTooltip"

src/components/opacity_input/opacity_input.vue

@@ -14,7 +14,7 @@
       :modelValue="present"
       :disabled="disabled"
       class="opt"
-      @change="$emit('update:modelValue', !present ? fallback : undefined)"
+      @update:modelValue="$emit('update:modelValue', !present ? fallback : undefined)"
     />
     <input
       :id="name"
@@ -37,11 +37,12 @@ export default {
     Checkbox
   },
   props: [
-    'name', 'value', 'fallback', 'disabled'
+    'name', 'modelValue', 'fallback', 'disabled'
   ],
+  emits: ['update:modelValue'],
   computed: {
     present () {
-      return typeof this.value !== 'undefined'
+      return typeof this.modelValue !== 'undefined'
     }
   }
 }

src/components/shadow_control/shadow_control.js

@@ -37,6 +37,7 @@ export default {
   props: [
     'modelValue', 'fallback', 'ready'
   ],
+  emits: ['update:modelValue'],
   data () {
     return {
       selectedId: 0,