feat: add document search nav

components.d.ts

@@ -78,7 +78,7 @@ declare module 'vue' {
     ColumnFilterBadge: typeof import('./src/components/ColumnFilterBadge.vue')['default']
     ColumnFilterDropdown: typeof import('./src/components/ColumnFilterDropdown.vue')['default']
     ContentTypeBadge: typeof import('./src/components/ContentTypeBadge.vue')['default']
-    copy: typeof import('./src/components/Document/DocumentLocalSearch/DocumentLocalSearchNav copy.vue')['default']
+    copy: typeof import('./src/components/Document/DocumentSearchNav/DocumentSearchNav copy.vue')['default']
     DismissableAlert: typeof import('./src/components/Dismissable/DismissableAlert.vue')['default']
     DismissableToastBody: typeof import('./src/components/Dismissable/DismissableToastBody.vue')['default']
     DisplayContentLength: typeof import('./src/components/Display/DisplayContentLength.vue')['default']
@@ -123,6 +123,8 @@ declare module 'vue' {
     DocumentLocalSearchOccurrences: typeof import('./src/components/Document/DocumentLocalSearch/DocumentLocalSearchOccurrences.vue')['default']
     DocumentNavbar: typeof import('./src/components/Document/DocumentNavbar.vue')['default']
     DocumentNotes: typeof import('./src/components/Document/DocumentNotes.vue')['default']
+    DocumentSearchNav: typeof import('./src/components/Document/DocumentSearchNav/DocumentSearchNav.vue')['default']
+    DocumentSearchNavItem: typeof import('./src/components/Document/DocumentSearchNav/DocumentSearchNavItem.vue')['default']
     DocumentSlicedName: typeof import('./src/components/DocumentSlicedName.vue')['default']
     DocumentTabDetails: typeof import('./src/components/Document/DocumentTab/DocumentTabDetails.vue')['default']
     DocumentTabExtractedText: typeof import('./src/components/Document/DocumentTab/DocumentTabExtractedText.vue')['default']

src/components/Document/DocumentSearchNav/DocumentSearchNav.vue

@@ -0,0 +1,41 @@
+<script setup>
+import DocumentSearchNavItem from './DocumentSearchNavItem'
+
+defineProps({
+  disabledPrevious: {
+    type: Boolean
+  },
+  disabledNext: {
+    type: Boolean
+  }
+})
+</script>
+
+<template>
+  <div class="document-search-nav">
+    <slot>
+      <document-search-nav-item
+        icon="caret-left"
+        :label="$t('documentSearchNavItem.previous')"
+        :disabled="disabledPrevious"
+        @click="$emit('previous')"
+      />
+      <document-search-nav-item
+        icon="caret-right"
+        :label="$t('documentSearchNavItem.next')"
+        :disabled="disabledNext"
+        @click="$emit('next')"
+      />
+    </slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.document-search-nav {
+  display: inline-flex;
+  padding: $spacer-xxs;
+  border-radius: var(--bs-border-radius);
+  color: var(--bs-light-color-subtle);
+  background: var(--bs-light-bg-subtle);
+}
+</style>

src/components/Document/DocumentSearchNav/DocumentSearchNavItem.vue

@@ -0,0 +1,40 @@
+<script setup>
+defineProps({
+  icon: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    required: true
+  },
+  disabled: {
+    type: Boolean
+  }
+})
+</script>
+
+<template>
+  <icon-button
+    class="document-search-nav-item"
+    variant="outline-tertiary"
+    :icon-left="icon"
+    icon-left-hover-weight="bold"
+    :disabled="disabled"
+    :label="label"
+    square
+    hide-label
+  />
+</template>
+
+<style lang="scss" scoped>
+.document-search-nav-item {
+  --bs-btn-color: var(--bs-tertiary-text-emphasis);
+  --bs-btn-border-color: transparent;
+  --bs-btn-hover-bg: var(--bs-secondary);
+  --bs-btn-hover-color: var(--bs-white);
+  --bs-btn-hover-border-color: transparent;
+  --bs-btn-active-bg: var(--bs-secondary);
+  --bs-btn-active-color: var(--bs-white);
+}
+</style>

src/lang/en.json

@@ -144,6 +144,10 @@
   "documentLocalSearchOccurrences": {
     "label": "{activeIndex} on {occurrences}"
   },
+  "documentSearchNavItem": {
+    "previous": "Previous",
+    "next": "Next"
+  },
   "documentThumbnail": {
     "noPreview": "No preview available"
   },

src/stories/components/Document/DocumentSearchNav/DocumentSearchNav.stories.js

@@ -0,0 +1,13 @@
+import DocumentSearchNav from '@/components/Document/DocumentSearchNav/DocumentSearchNav'
+
+export default {
+  title: 'Components/Document/DocumentSearchNav/DocumentSearchNav',
+  component: DocumentSearchNav,
+  tags: ['autodocs'],
+  args: {
+    disablePrevious: false,
+    disableNext: false
+  }
+}
+
+export const Default = {}