v-slot

src/components/notifications/notification_filters.vue

@@ -5,65 +5,66 @@
     placement="bottom"
     :bound-to="{ x: 'container' }"
   >
-    <div
-      slot="content"
-      class="dropdown-menu"
+    <template
+      v-slot:content
     >
-      <button
-        class="button-default dropdown-item"
-        @click="toggleNotificationFilter('likes')"
-      >
-        <span
-          class="menu-checkbox"
-          :class="{ 'menu-checkbox-checked': filters.likes }"
-        />{{ $t('settings.notification_visibility_likes') }}
-      </button>
-      <button
-        class="button-default dropdown-item"
-        @click="toggleNotificationFilter('repeats')"
-      >
-        <span
-          class="menu-checkbox"
-          :class="{ 'menu-checkbox-checked': filters.repeats }"
-        />{{ $t('settings.notification_visibility_repeats') }}
-      </button>
-      <button
-        class="button-default dropdown-item"
-        @click="toggleNotificationFilter('follows')"
-      >
-        <span
-          class="menu-checkbox"
-          :class="{ 'menu-checkbox-checked': filters.follows }"
-        />{{ $t('settings.notification_visibility_follows') }}
-      </button>
-      <button
-        class="button-default dropdown-item"
-        @click="toggleNotificationFilter('mentions')"
-      >
-        <span
-          class="menu-checkbox"
-          :class="{ 'menu-checkbox-checked': filters.mentions }"
-        />{{ $t('settings.notification_visibility_mentions') }}
-      </button>
-      <button
-        class="button-default dropdown-item"
-        @click="toggleNotificationFilter('emojiReactions')"
-      >
-        <span
-          class="menu-checkbox"
-          :class="{ 'menu-checkbox-checked': filters.emojiReactions }"
-        />{{ $t('settings.notification_visibility_emoji_reactions') }}
-      </button>
-      <button
-        class="button-default dropdown-item"
-        @click="toggleNotificationFilter('moves')"
-      >
-        <span
-          class="menu-checkbox"
-          :class="{ 'menu-checkbox-checked': filters.moves }"
-        />{{ $t('settings.notification_visibility_moves') }}
-      </button>
-    </div>
+      <div class="dropdown-menu">
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('likes')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.likes }"
+          />{{ $t('settings.notification_visibility_likes') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('repeats')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.repeats }"
+          />{{ $t('settings.notification_visibility_repeats') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('follows')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.follows }"
+          />{{ $t('settings.notification_visibility_follows') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('mentions')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.mentions }"
+          />{{ $t('settings.notification_visibility_mentions') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('emojiReactions')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.emojiReactions }"
+          />{{ $t('settings.notification_visibility_emoji_reactions') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('moves')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.moves }"
+          />{{ $t('settings.notification_visibility_moves') }}
+        </button>
+      </div>
+    </template>
     <template v-slot:trigger>
       <FAIcon icon="filter" />
     </template>