Merge branch 'vue3-again' into shigusegubu-vue3

* vue3-again:
  fix forms closing in timelines
  fix minor renames
  woah ima stupid

src/components/checkbox/checkbox.vue

@@ -6,7 +6,7 @@
     <input
       type="checkbox"
       :disabled="disabled"
-      :modelValue="modelValue"
+      :checked="modelValue"
       :indeterminate="indeterminate"
       @change="$emit('update:modelValue', $event.target.checked)"
     >

src/components/image_cropper/image_cropper.js

@@ -66,7 +66,7 @@ const ImageCropper = {
     }
   },
   methods: {
-    destroy () {
+    unmounted () {
       if (this.cropper) {
         this.cropper.destroy()
       }
@@ -117,7 +117,7 @@ const ImageCropper = {
     const fileInput = this.$refs.input
     fileInput.addEventListener('change', this.readFile)
   },
-  beforeDestroy: function () {
+  beforeUnmount: function () {
     // remove the event listeners
     const trigger = this.getTriggerDOM()
     if (trigger) {

src/components/timeline/timeline.js

@@ -40,6 +40,12 @@ const Timeline = {
     TimelineQuickSettings
   },
   computed: {
+    filteredVisibleStatuses () {
+      return this.timeline.visibleStatuses.filter(status => this.timelineName !== 'user' || (status.id >= this.timeline.minId && status.id <= this.timeline.maxId))
+    },
+    filteredPinnedStatusesId () {
+      return this.pinnedStatusIds.filter(statusId => this.timeline.statusesObject[statusId])
+    },
     newStatusCount () {
       return this.timeline.newStatusCount
     },

src/components/timeline/timeline.vue

@@ -23,9 +23,8 @@
         ref="timeline"
         class="timeline"
       >
-        <template v-for="statusId in pinnedStatusIds">
         <conversation
-            v-if="timeline.statusesObject[statusId]"
+          v-for="statusId in filteredPinnedStatusIds"
           :key="statusId + '-pinned'"
           class="status-fadein"
           :status-id="statusId"
@@ -34,10 +33,8 @@
           :in-profile="inProfile"
           :profile-user-id="userId"
         />
-        </template>
-        <template v-for="status in timeline.visibleStatuses">
         <conversation
-            v-if="timelineName !== 'user' || (status.id >= timeline.minId && status.id <= timeline.maxId)"
+          v-for="status in filteredVisibleStatuses"
           :key="status.id"
           class="status-fadein"
           :status-id="status.id"
@@ -46,7 +43,6 @@
           :profile-user-id="userId"
           :virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.includes(status.id)"
         />
-        </template>
       </div>
     </div>
     <div :class="classes.footer">

src/hocs/with_load_more/with_load_more.jsx

@@ -17,7 +17,7 @@ library.add(
 const withLoadMore = ({
   fetch, // function to fetch entries and return a promise
   select, // function to select data from store
-  destroy, // function called at "destroyed" lifecycle
+  unmounted, // function called at "destroyed" lifecycle
   childPropName = 'entries', // name of the prop to be passed into the wrapped component
   additionalPropNames = [] // additional prop name list of the wrapper component
 }) => (WrappedComponent) => {
@@ -42,7 +42,7 @@ const withLoadMore = ({
     },
     unmounted () {
       window.removeEventListener('scroll', this.scrollLoad)
-      destroy && destroy(this.$props, this.$store)
+      unmounted && unmounted(this.$props, this.$store)
     },
     methods: {
       // Entries is not a computed because computed can't track the dynamic