feat(NcAppNavigation): Provide consistent in-app search

`NcAppNaviation` now provides an optional in-app search when `show-search` is set. This allows apps which have in app filtering / search to use a consistent layout. Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
nextcloud-libraries · Jul 18, 2024 · dccdc53 · dccdc53
1 parent 29922ce
commit dccdc53
Show file tree

Hide file tree

Showing 3 changed files with 223 additions and 0 deletions.
diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -33,6 +33,100 @@ 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>
+					<NcActionButton>
+						<template #icon>
+							<IconFilter :size="20" />
+						</template>
+						Filter
+					</NcActionButton>
+					<NcActionButton>
+						<template #icon>
+							<IconSearchGlobal :size="20" />
+						</template>
+						Search globally
+					</NcActionButton>
+				</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 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: {
+		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;
+	/* prvent 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>
@@ -47,6 +141,14 @@ emit('toggle-navigation', {
 			:inert="!open || undefined"
 			@keydown.esc="handleEsc">
 			<div class="app-navigation__body" :class="{ 'app-navigation__body--no-list': !$scopedSlots.list }">
+				<NcAppNavigationSearch v-if="showSearch"
+					:value="search"
+					@update:value="$emit('update:search', $event)">
+					<template #actions>
+						<slot name="search-actions" />
+					</template>
+				</NcAppNavigationSearch>
+
 				<!-- The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->
 				<slot />
 			</div>
@@ -105,6 +207,16 @@ export default {
 			type: String,
 			default: '',
 		},
+
+		showSearch: {
+			type: Boolean,
+			default: false,
+		},
+
+		search: {
+			type: String,
+			default: ''
+		},
 	},
 
 	setup() {

diff --git a/src/components/NcAppNavigation/NcAppNavigationSearch.vue b/src/components/NcAppNavigation/NcAppNavigationSearch.vue
@@ -0,0 +1,110 @@
+<!--
+  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="app-navigation-search"
+		:class="{
+			'app-navigation-search--has-actions': hasActions,
+		}">
+		<NcInputField ref="inputElement"
+			:aria-label="label"
+			class="app-navigation-search__input"
+			label-outside
+			:pill="isLegacyVersion"
+			:placeholder="label"
+			show-trailing-button
+			:trailing-button-label="t('Clear search')"
+			type="search"
+			:value="value"
+			@update:value="$emit('update:value', $event)"
+			@trailing-button-click="onCloseSearch">
+			<template #trailing-button-icon>
+				<IconClose :size="20" />
+			</template>
+		</NcInputField>
+		<Transition name="slide-fade">
+			<NcActions v-if="hasActions"
+				v-show="showActions"
+				ref="actions"
+				class="app-navigation-search__actions"
+				:inline="1">
+				<slot name="actions" />
+			</NcActions>
+		</Transition>
+	</div>
+</template>
+
+<script setup>
+import { useFocusWithin } from '@vueuse/core'
+import { computed, ref, nextTick, useSlots, watch } from 'vue'
+import { t } from '../../l10n.js'
+
+import IconClose from 'vue-material-design-icons/Close.vue'
+import NcInputField from '../NcInputField/NcInputField.vue'
+
+defineProps({
+	value: {
+		type: String,
+		default: '',
+	},
+	label: {
+		type: String,
+		default: t('Search in app…'),
+	},
+})
+
+const emit = defineEmits(['update:value'])
+const slots = useSlots()
+
+const isLegacyVersion = (window.OC?.config?.version?.split('.')[0] ?? 30) < 30
+
+const inputElement = ref()
+const { focused: inputHasFocus } = useFocusWithin(inputElement)
+
+/**
+ * @type {import('vue').Ref<import('vue').ComponentPublicInstance>}
+ */
+const actions = ref()
+const hasActions = computed(() => !!slots.actions)
+const showActions = ref(true)
+watch([inputHasFocus], () => { showActions.value = !inputHasFocus.value })
+
+/**
+ * Handle close the search
+ */
+function onCloseSearch() {
+	emit('update:value', '')
+	if (hasActions.value) {
+		showActions.value = true
+		nextTick(() => actions.value.$el.querySelector('button').focus())
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.app-navigation-search {
+	display: flex;
+	gap: var(--app-navigation-padding);
+	padding: var(--app-navigation-padding);
+
+	&--has-actions &__input {
+		flex-grow: 1;
+		z-index: 3;
+	}
+
+	&__actions {
+		margin-inline-start: 0;
+	}
+}
+
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+	transition: margin-inline-start var(--animation-quick);
+}
+
+.slide-fade-enter,
+.slide-fade-leave-to {
+	margin-inline-start: calc(-1 * var(--default-clickable-area));
+}
+</style>
diff --git a/styleguide.config.js b/styleguide.config.js
@@ -186,6 +186,7 @@ module.exports = async () => {
 									'src/components/NcAppNavigation*/*.vue',
 								],
 								ignore: [
+									'src/components/NcAppNavigation/NcAppNavigationSearch.vue',
 									'src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue',
 									'src/components/NcAppNavigationItem/NcInputConfirmCancel.vue',
 								],