4.0.0-rc4.3

* Added: Settings Search
* Added: Button to open the FFZ Control Center in a new window.
* Added: Button to fade the FFZ Control Center.

src/modules/main_menu/components/menu-page.vue

@@ -26,30 +26,40 @@
 		/>
 		<template v-if="! item.contents || ! item.contents.length">
 			<ul class="tw-border-t tw-pd-y-1">
-				<li v-for="i in item.items" :key="i.full_key" class="tw-pd-x-1">
+				<li
+					v-for="i in item.items"
+					:key="i.full_key"
+					:class="{'ffz-unmatched-item': ! shouldShow(i)}"
+					class="tw-pd-x-1"
+				>
 					<a href="#" @click="$emit('change-item', i, false)">
 						{{ t(i.i18n_key, i.title, i) }}
 					</a>
 				</li>
 			</ul>
 		</template>
-		<component
+		<div
 			v-for="i in item.contents"
-			ref="children"
-			:is="i.component"
-			:context="context"
-			:item="i"
 			:key="i.full_key"
-			@change-item="changeItem"
-			@navigate="navigate"
-		/>
+			:class="{'ffz-unmatched-item': ! shouldShow(i)}"
+		>
+			<component
+				ref="children"
+				:is="i.component"
+				:context="context"
+				:item="i"
+				:filter="filter"
+				@change-item="changeItem"
+				@navigate="navigate"
+			/>
+		</div>
 	</div>
 </template>
 
 <script>
 
 export default {
-	props: ['item', 'context'],
+	props: ['item', 'context', 'filter'],
 
 	computed: {
 		breadcrumbs() {
@@ -65,6 +75,13 @@ export default {
 	},
 
 	methods: {
+		shouldShow(item) {
+			if ( ! this.filter || ! this.filter.length || ! item.search_terms )
+				return true;
+
+			return item.search_terms.includes(this.filter);
+		},
+
 		changeItem(item) {
 			this.$emit('change-item', item);
 		},