From bf3be15a07e78d90c23d22c91d7094dc39c67904 Mon Sep 17 00:00:00 2001
From: Pierre Romera <hello@pirhoo.com>
Date: Mon, 29 Jul 2024 08:23:05 +0000
Subject: [PATCH] feat: add size option

---
 .../SearchBreadcrumbEntry.vue                 |  8 +++++--
 .../SearchBreadcrumbEntryFilter.vue           |  4 ++++
 .../SearchBreadcrumbEntryOccurrences.vue      |  2 +-
 .../SearchBreadcrumbEntryQuery.vue            |  6 +++++-
 .../SearchBreadcrumbEntryQueryAst.vue         | 21 +++++++++++++++++--
 .../SearchBreadcrumbEntryQueryTerm.vue        |  4 ++++
 6 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/components/SearchBreadcrumb/SearchBreadcrumbEntry.vue b/src/components/SearchBreadcrumb/SearchBreadcrumbEntry.vue
index 50a797e8ce..8ecf843498 100644
--- a/src/components/SearchBreadcrumb/SearchBreadcrumbEntry.vue
+++ b/src/components/SearchBreadcrumb/SearchBreadcrumbEntry.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { PhosphorIcon } from '@icij/murmur-next'
 import { computed } from 'vue'
+import { pick } from 'lodash'
 
 import SearchBreadcrumbEntryOccurrences from './SearchBreadcrumbEntryOccurrences'
 import SearchBreadcrumbEntryFilter from './SearchBreadcrumbEntryFilter'
@@ -24,6 +25,9 @@ const props = defineProps({
     type: String,
     default: null
   },
+  size: {
+    type: String
+  },
   occurrences: {
     type: Number,
     default: 0
@@ -45,8 +49,8 @@ const entryComponent = computed(() => {
 
 const entryAttributes = computed(() => {
   return props.filter
-    ? { name: props.filter, value: props.value, icon: props.icon, color: props.color, noIcon: props.noIcon }
-    : { query: props.query, noIcon: props.noIcon }
+    ? { name: props.filter, ...pick(props, ['value', 'icon', 'color', 'noIcon', 'size']) }
+    : pick(props, ['query', 'noIcon', 'size'])
 })
 </script>
 
diff --git a/src/components/SearchBreadcrumb/SearchBreadcrumbEntryFilter.vue b/src/components/SearchBreadcrumb/SearchBreadcrumbEntryFilter.vue
index 6145378d2a..c24f2e638b 100644
--- a/src/components/SearchBreadcrumb/SearchBreadcrumbEntryFilter.vue
+++ b/src/components/SearchBreadcrumb/SearchBreadcrumbEntryFilter.vue
@@ -25,6 +25,9 @@ const props = defineProps({
     type: String,
     default: null
   },
+  size: {
+    type: String
+  },
   operator: {
     type: String
   },
@@ -66,6 +69,7 @@ const color = computed(() => {
     :term="term"
     :operator="operator"
     :prefix="prefix"
+    :size="size"
     :icon="icon"
     :color="color"
     :no-icon="noIcon"
diff --git a/src/components/SearchBreadcrumb/SearchBreadcrumbEntryOccurrences.vue b/src/components/SearchBreadcrumb/SearchBreadcrumbEntryOccurrences.vue
index c3eedf5490..0de5b2a133 100644
--- a/src/components/SearchBreadcrumb/SearchBreadcrumbEntryOccurrences.vue
+++ b/src/components/SearchBreadcrumb/SearchBreadcrumbEntryOccurrences.vue
@@ -20,7 +20,7 @@ const lessOccurrences = computed(() => {
 <template>
   <div
     v-b-tooltip.top="{ offset: '0' }"
-    class="search-breadcrumb-entry-occurrences d-inline-flex p-2"
+    class="search-breadcrumb-entry-occurrences d-inline-flex px-2"
     :title="$t('searchBreadcrumbEntryOccurences.title', lessOccurrences, { lessOccurrences: $n(lessOccurrences) })"
   >
     {{ $t('searchBreadcrumbEntryOccurences.label', occurrences, { occurrences: $n(occurrences) }) }}
diff --git a/src/components/SearchBreadcrumb/SearchBreadcrumbEntryQuery.vue b/src/components/SearchBreadcrumb/SearchBreadcrumbEntryQuery.vue
index 2961154138..2d1945c4a5 100644
--- a/src/components/SearchBreadcrumb/SearchBreadcrumbEntryQuery.vue
+++ b/src/components/SearchBreadcrumb/SearchBreadcrumbEntryQuery.vue
@@ -11,6 +11,9 @@ const props = defineProps({
   },
   noIcon: {
     type: Boolean
+  },
+  size: {
+    type: String
   }
 })
 
@@ -24,11 +27,12 @@ const ast = computed(() => {
 </script>
 
 <template>
-  <search-breadcrumb-entry-query-ast v-if="ast" :ast="ast" :no-icon="noIcon" />
+  <search-breadcrumb-entry-query-ast v-if="ast" :ast="ast" :no-icon="noIcon" :size="size" />
   <search-breadcrumb-entry-query-term
     v-else
     :term="query"
     :no-icon="noIcon"
+    :size="size"
     title="Unable to parse the query"
     color="var(--bs-danger)"
     prefix="-"
diff --git a/src/components/SearchBreadcrumb/SearchBreadcrumbEntryQueryAst.vue b/src/components/SearchBreadcrumb/SearchBreadcrumbEntryQueryAst.vue
index 0d205e738d..6ec11ae8b9 100644
--- a/src/components/SearchBreadcrumb/SearchBreadcrumbEntryQueryAst.vue
+++ b/src/components/SearchBreadcrumb/SearchBreadcrumbEntryQueryAst.vue
@@ -17,6 +17,9 @@ const props = defineProps({
   },
   noIcon: {
     type: Boolean
+  },
+  size: {
+    type: String
   }
 })
 
@@ -28,13 +31,20 @@ const isTerm = computed(() => !!props.ast.term && !isFilter.value)
 
 <template>
   <span class="search-breadcrumb-entry-query-ast d-inline-flex flex-wrap flex-wrap column-gap-1 row-gap-2">
-    <search-breadcrumb-entry-query-ast v-if="isLeft" :ast="ast.left" :operator="operator" :no-icon="noIcon" />
+    <search-breadcrumb-entry-query-ast
+      v-if="isLeft"
+      :ast="ast.left"
+      :operator="operator"
+      :no-icon="noIcon"
+      :size="size"
+    />
     <search-breadcrumb-entry-query-term
       v-if="isTerm"
       :term="ast.term"
       :operator="operator"
       :prefix="ast.prefix"
       :no-icon="noIcon"
+      :size="size"
     />
     <search-breadcrumb-entry-filter
       v-if="isFilter"
@@ -43,7 +53,14 @@ const isTerm = computed(() => !!props.ast.term && !isFilter.value)
       :prefix="ast.prefix"
       :value="ast.term"
       :no-icon="noIcon"
+      :size="size"
+    />
+    <search-breadcrumb-entry-query-ast
+      v-if="isRight"
+      :ast="ast.right"
+      :operator="ast.operator"
+      :no-icon="noIcon"
+      :size="size"
     />
-    <search-breadcrumb-entry-query-ast v-if="isRight" :ast="ast.right" :operator="ast.operator" :no-icon="noIcon" />
   </span>
 </template>
diff --git a/src/components/SearchBreadcrumb/SearchBreadcrumbEntryQueryTerm.vue b/src/components/SearchBreadcrumb/SearchBreadcrumbEntryQueryTerm.vue
index cb0836b3a8..56aaff9414 100644
--- a/src/components/SearchBreadcrumb/SearchBreadcrumbEntryQueryTerm.vue
+++ b/src/components/SearchBreadcrumb/SearchBreadcrumbEntryQueryTerm.vue
@@ -26,6 +26,9 @@ const props = defineProps({
   },
   noIcon: {
     type: Boolean
+  },
+  size: {
+    type: String
   }
 })
 
@@ -51,6 +54,7 @@ const showOperator = computed(() => {
     variant="outline-danger"
     class="search-breadcrumb-entry-query-term"
     :class="classList"
+    :size="size"
     :style="style"
     :icon-left="noIcon ? null : icon"
     icon-right="x"