chore: Make the NcAppNavigationSearch a fully separated component

Co-authored-by: Grigorii K. Shartsev <[email protected]>
Co-authored-by: Ferdinand Thiessen <[email protected]>
Signed-off-by: Ferdinand Thiessen <[email protected]>

Author: susnux

l10n/messages.pot

@@ -332,10 +332,10 @@ msgstr ""
 msgid "Search for time zone"
 msgstr ""
 
-msgid "Search in app…"
+msgid "Search results"
 msgstr ""
 
-msgid "Search results"
+msgid "Search…"
 msgstr ""
 
 #. FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'

src/components/NcAppNavigation/NcAppNavigation.vue

@@ -33,117 +33,6 @@ emit('toggle-navigation', {
 })
 ```
 
-#### With in-app search
-
-```vue
-<template>
-	<div class="styleguide-wrapper">
-		<NcContent app-name="styleguide-app-navigation" class="content-styleguidist">
-			<NcAppNavigation show-search :search.sync="searchQuery">
-				<template #search-actions>
-					<NcActions aria-label="Filters">
-						<template #icon>
-							<IconFilter :size="20" />
-						</template>
-						<NcActionButton>
-							<template #icon>
-								<IconAccount :size="20" />
-							</template>
-							Filter by name
-						</NcActionButton>
-						<NcActionButton>
-							<template #icon>
-								<IconCalendarAccount :size="20" />
-							</template>
-							Filter by year
-						</NcActionButton>
-					</NcActions>
-					<NcButton aria-label="Search globally" type="tertiary">
-						<template #icon>
-							<IconSearchGlobal :size="20" />
-						</template>
-					</NcButton>
-				</template>
-				<template #list>
-					<NcAppNavigationItem name="First navigation entry">
-						<template #icon>
-							<IconStar :size="20" />
-						</template>
-					</NcAppNavigationItem>
-					<NcAppNavigationItem name="Second navigation entry">
-						<template #icon>
-							<IconStar :size="20" />
-						</template>
-					</NcAppNavigationItem>
-				</template>
-			</NcAppNavigation>
-			<NcAppContent>
-				<ul class="fake-content">
-					<li>Search query: {{ searchQuery }}</li>
-					<li v-for="(item, index) in items" :key="index">
-						{{ item }}
-					</li>
-				</ul>
-			</NcAppContent>
-		</NcContent>
-	</div>
-</template>
-<script>
-import IconAccount from 'vue-material-design-icons/Account.vue'
-import IconCalendarAccount from 'vue-material-design-icons/CalendarAccount.vue'
-import IconFilter from 'vue-material-design-icons/Filter.vue'
-import IconSearchGlobal from 'vue-material-design-icons/CloudSearch.vue'
-import IconStar from 'vue-material-design-icons/Star.vue'
-
-const exampleItem = ['Mary', 'Patricia', 'James', 'Michael']
-
-export default {
-	components: {
-		IconAccount,
-		IconCalendarAccount,
-		IconFilter,
-		IconSearchGlobal,
-		IconStar,
-	},
-
-	data() {
-		return {
-			searchQuery: '',
-		}
-	},
-
-	computed: {
-		items() {
-			return exampleItem.filter((item) => item.toLocaleLowerCase().includes(this.searchQuery.toLocaleLowerCase()))
-		},
-	},
-}
-</script>
-<style scoped>
-/* This styles just mock NcContent and NcAppContent */
-.content-styleguidist {
-	position: relative !important;
-	margin: 0 !important;
-	/* prevent jumping */
-	min-height: 200px;
-}
-
-.content-styleguidist > * {
-	height: auto;
-}
-
-.fake-content {
-	padding: var(--app-navigation-padding);
-	padding-top: calc(2 * var(--app-navigation-padding) + var(--default-clickable-area));
-}
-
-.styleguide-wrapper {
-	background-color: var(--color-background-plain);
-	padding: var(--body-container-margin);
-}
-</style>
-```
-
 </docs>
 
 <template>
@@ -157,28 +46,21 @@ export default {
 			class="app-navigation__content"
 			:inert="!open || undefined"
 			@keydown.esc="handleEsc">
+			<div class="app-navigation__search">
+				<!-- @slot For in-app search you can pass a `NcAppNavigationSearch` component as the slot content. -->
+				<slot name="search" />
+			</div>
 			<div class="app-navigation__body" :class="{ 'app-navigation__body--no-list': !$scopedSlots.list }">
-				<NcAppNavigationSearch v-if="showSearch"
-					:label="searchLabel || undefined"
-					:no-inline-actions="noSearchInlineActions"
-					:value="search"
-					@update:value="$emit('update:search', $event)">
-					<template #actions>
-						<!-- @slot Optional actions, like NcActions or icon only buttons, to show next to the search input -->
-						<slot name="search-actions" />
-					</template>
-				</NcAppNavigationSearch>
-
-				<!-- The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->
+				<!-- @slot The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->
 				<slot />
 			</div>
 
 			<NcAppNavigationList v-if="$scopedSlots.list" class="app-navigation__list">
-				<!-- List for Navigation list items. Stretched between the main content and the footer -->
+				<!-- @slot List for Navigation list items. Stretched between the main content and the footer -->
 				<slot name="list" />
 			</NcAppNavigationList>
 
-			<!-- Footer for e.g. NcAppNavigationSettings -->
+			<!-- @slot Footer for e.g. NcAppNavigationSettings -->
 			<slot name="footer" />
 		</nav>
 		<NcAppNavigationToggle :open="open" @update:open="toggleNavigation" />
@@ -192,7 +74,6 @@ import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { createFocusTrap } from 'focus-trap'
 
 import NcAppNavigationList from '../NcAppNavigationList/index.js'
-import NcAppNavigationSearch from './NcAppNavigationSearch.vue'
 import NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
 import Vue from 'vue'
 
@@ -201,7 +82,6 @@ export default {
 
 	components: {
 		NcAppNavigationList,
-		NcAppNavigationSearch,
 		NcAppNavigationToggle,
 	},
 
@@ -229,38 +109,6 @@ export default {
 			type: String,
 			default: '',
 		},
-
-		/**
-		 * If set an in-app search is shown as the first entry
-		 */
-		showSearch: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * The current search query
-		 */
-		search: {
-			type: String,
-			default: '',
-		},
-
-		/**
-		 * Label of in-app search input
-		 */
-		searchLabel: {
-			type: String,
-			default: null,
-		},
-
-		/**
-		 * Force a menu if there is more than one search action
-		 */
-		noSearchInlineActions: {
-			type: Boolean,
-			default: false,
-		},
 	},
 
 	setup() {
@@ -399,6 +247,14 @@ export default {
 		margin-left: calc(-1 * min($navigation-width, var(--app-navigation-max-width)));
 	}
 
+	&__search {
+		width: 100%;
+	}
+
+	&__body {
+		overflow-y: scroll;
+	}
+
 	// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot
 	// Same styles as NcAppNavigationList
 	&__content > ul {