feat: add size option

Author: pirhoo

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>
 

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"

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) }) }}

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="-"

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>

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"