Merge pull request #5831 from nextcloud-libraries/feat/app-navigation-search

feat(NcAppNavigation): Provide consistent in-app search

Author: susnux

l10n/messages.pot

@@ -335,6 +335,9 @@ msgstr ""
 msgid "Search results"
 msgstr ""
 
+msgid "Search…"
+msgstr ""
+
 #. FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
 msgid "sec. ago"
 msgstr ""

src/components/NcAppNavigation/NcAppNavigation.vue

@@ -46,17 +46,21 @@ emit('toggle-navigation', {
 			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 }">
-				<!-- 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" />
@@ -69,8 +73,8 @@ import { getTrapStack } from '../../utils/focusTrap.js'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { createFocusTrap } from 'focus-trap'
 
-import NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
 import NcAppNavigationList from '../NcAppNavigationList/index.js'
+import NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
 import Vue from 'vue'
 
 export default {
@@ -159,7 +163,7 @@ export default {
 		 * @param {boolean} [state] set the state instead of inverting the current one
 		 */
 		toggleNavigation(state) {
-			// Early return if alreay in that state
+			// Early return if already in that state
 			if (this.open === state) {
 				emit('navigation-toggled', {
 					open: this.open,
@@ -206,7 +210,7 @@ export default {
 <style lang="scss">
 .app-navigation,
 .app-content {
-	/** Distance of the app naviation toggle and the first navigation item to the top edge of the app content container */
+	/** Distance of the app navigation toggle and the first navigation item to the top edge of the app content container */
 	--app-navigation-padding: #{$app-navigation-padding};
 }
 </style>
@@ -243,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 {

src/components/NcAppNavigationItem/NcAppNavigationItem.vue

@@ -5,9 +5,9 @@
 
 <docs>
 
-# Usage
+### Usage
 
-### Simple element
+#### Simple element
 
 * With an icon:
 
@@ -46,7 +46,7 @@
 </ul>
 ```
 
-### Element with actions
+#### Element with actions
 Wrap the children in a template. If you have more than 2 actions, a popover menu and a menu
 button will be automatically created.
 
@@ -98,7 +98,7 @@ button will be automatically created.
 	</script>
 ```
 
-### Element with counter
+#### Element with counter
 Just nest the counter in a template within `<NcAppNavigationItem>` and add `#counter` to it.
 
 ```vue
@@ -127,7 +127,7 @@ Just nest the counter in a template within `<NcAppNavigationItem>` and add `#cou
 	</script>
 ```
 
-### Element with children
+#### Element with children
 
 Wrap the children in a template with the `slot` property and use the prop `allowCollapse` to choose wether to allow or
 prevent the user from collapsing the items.
@@ -189,7 +189,7 @@ prevent the user from collapsing the items.
 	</script>
 ```
 
-### Editable element
+#### Editable element
 Add the prop `:editable=true` and an edit placeholder if you need it. By default
 the placeholder is the previous name of the element.
 
@@ -215,7 +215,7 @@ the placeholder is the previous name of the element.
 	</script>
 ```
 
-### Undo element
+#### Undo element
 Just set the `undo` and `name` props. When clicking the undo button, an `undo` event is emitted.
 
 ```
@@ -224,7 +224,7 @@ Just set the `undo` and `name` props. When clicking the undo button, an `undo` e
 </ul>
 ```
 
-### Link element
+#### Link element
 Href that start by http will be treated as external and opened in a new tab
 ```
 <div>
@@ -235,14 +235,14 @@ Href that start by http will be treated as external and opened in a new tab
 </div>
 ```
 
-### Custom title
+#### Custom title
 ```
 <ul>
 	<NcAppNavigationItem name="Nextcloud" title="Open the Nextcloud website" href="https://nextcloud.com" />
 </ul>
 ```
 
-### Pinned element
+#### Pinned element
 Just set the `pinned` prop.
 ```
 <ul>

src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue

@@ -4,9 +4,9 @@
 -->
 
 <docs>
-# Usage
+### Usage
 
-### New Item element
+#### New Item element
 ```vue
 	<template>
 		<NcAppNavigationNewItem name="New Item" @new-item="function(value){alert(value)}">
@@ -26,7 +26,7 @@
 	</script>
 ```
 
-### New Item element with a loading animation instead of the icon
+#### New Item element with a loading animation instead of the icon
 ```vue
 	<template>
 		<NcAppNavigationNewItem name="New Item" :loading="true">