feat: noIcon props and use gap between entries

src/components/SearchBreadcrumb/SearchBreadcrumb.vue

@@ -27,7 +27,7 @@ const isEmpty = computed(() => !slots.default)
             <phosphor-icon name="path" />
             {{ $t('searchBreadcrumb.label') }}
           </div>
-          <div class="search-breadcrumb__entries">
+          <div class="search-breadcrumb__entries d-flex flex-wrap row-gap-2 column-gap-1 align-items-baseline">
             <slot />
           </div>
         </div>

src/components/SearchBreadcrumb/SearchBreadcrumbEntry.vue

@@ -30,6 +30,12 @@ const props = defineProps({
   },
   noCaret: {
     type: Boolean
+  },
+  noOccurrences: {
+    type: Boolean
+  },
+  noIcon: {
+    type: Boolean
   }
 })
 
@@ -39,21 +45,26 @@ const entryComponent = computed(() => {
 
 const entryAttributes = computed(() => {
   return props.filter
-    ? { name: props.filter, value: props.value, icon: props.icon, color: props.color }
-    : { query: props.query }
+    ? { name: props.filter, value: props.value, icon: props.icon, color: props.color, noIcon: props.noIcon }
+    : { query: props.query, noIcon: props.noIcon }
 })
 </script>
 
 <template>
-  <div class="search-breadcrumb-entry d-md-inline-flex">
+  <div class="search-breadcrumb-entry d-inline-flex flex-wrap">
     <component :is="entryComponent" v-bind="entryAttributes" />
     <div class="text-nowrap">
-      <search-breadcrumb-entry-occurrences v-bind="entryAttributes" :occurrences="occurrences" />
+      <search-breadcrumb-entry-occurrences
+        v-if="!noOccurrences"
+        class="search-breadcrumb-entry__occurences"
+        v-bind="entryAttributes"
+        :occurrences="occurrences"
+      />
       <phosphor-icon
         v-if="!noCaret"
         role="separator"
         aria-hidden="true"
-        class="search-breadcrumb-entry__caret mb-2"
+        class="search-breadcrumb-entry__caret"
         size="1em"
         weight="fill"
         name="caret-right"
@@ -65,7 +76,6 @@ const entryAttributes = computed(() => {
 <style lang="scss" scoped>
 .search-breadcrumb-entry {
   align-items: center;
-  padding-right: $spacer-xs;
   color: var(--bs-secondary);
 }
 </style>

src/components/SearchBreadcrumb/SearchBreadcrumbEntryFilter.vue

@@ -27,6 +27,9 @@ const props = defineProps({
   },
   operator: {
     type: String
+  },
+  noIcon: {
+    type: Boolean
   }
 })
 
@@ -59,5 +62,12 @@ const color = computed(() => {
 </script>
 
 <template>
-  <search-breadcrumb-entry-query-term :term="term" :operator="operator" :prefix="prefix" :icon="icon" :color="color" />
+  <search-breadcrumb-entry-query-term
+    :term="term"
+    :operator="operator"
+    :prefix="prefix"
+    :icon="icon"
+    :color="color"
+    :no-icon="noIcon"
+  />
 </template>

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 mb-2"
+    class="search-breadcrumb-entry-occurrences d-inline-flex p-2"
     :title="$t('searchBreadcrumbEntryOccurences.title', lessOccurrences, { lessOccurrences: $n(lessOccurrences) })"
   >
     {{ $t('searchBreadcrumbEntryOccurences.label', occurrences, { occurrences: $n(occurrences) }) }}

src/components/SearchBreadcrumb/SearchBreadcrumbEntryQuery.vue

@@ -8,6 +8,9 @@ import SearchBreadcrumbEntryQueryTerm from './SearchBreadcrumbEntryQueryTerm'
 const props = defineProps({
   query: {
     type: String
+  },
+  noIcon: {
+    type: Boolean
   }
 })
 
@@ -21,10 +24,11 @@ const ast = computed(() => {
 </script>
 
 <template>
-  <search-breadcrumb-entry-query-ast v-if="ast" :ast="ast" />
+  <search-breadcrumb-entry-query-ast v-if="ast" :ast="ast" :no-icon="noIcon" />
   <search-breadcrumb-entry-query-term
     v-else
     :term="query"
+    :no-icon="noIcon"
     title="Unable to parse the query"
     color="var(--bs-danger)"
     prefix="-"

src/components/SearchBreadcrumb/SearchBreadcrumbEntryQueryAst.vue

@@ -14,6 +14,9 @@ const props = defineProps({
   },
   operator: {
     type: String
+  },
+  noIcon: {
+    type: Boolean
   }
 })
 
@@ -24,16 +27,23 @@ const isTerm = computed(() => !!props.ast.term && !isFilter.value)
 </script>
 
 <template>
-  <span class="search-breadcrumb-entry-query-ast d-inline-block">
-    <search-breadcrumb-entry-query-ast v-if="isLeft" :ast="ast.left" :operator="operator" />
-    <search-breadcrumb-entry-query-term v-if="isTerm" :term="ast.term" :operator="operator" :prefix="ast.prefix" />
+  <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-term
+      v-if="isTerm"
+      :term="ast.term"
+      :operator="operator"
+      :prefix="ast.prefix"
+      :no-icon="noIcon"
+    />
     <search-breadcrumb-entry-filter
       v-if="isFilter"
       :name="ast.field"
       :operator="operator"
       :prefix="ast.prefix"
       :value="ast.term"
+      :no-icon="noIcon"
     />
-    <search-breadcrumb-entry-query-ast v-if="isRight" :ast="ast.right" :operator="ast.operator" />
+    <search-breadcrumb-entry-query-ast v-if="isRight" :ast="ast.right" :operator="ast.operator" :no-icon="noIcon" />
   </span>
 </template>

src/components/SearchBreadcrumb/SearchBreadcrumbEntryQueryTerm.vue

@@ -23,6 +23,9 @@ const props = defineProps({
   },
   operator: {
     type: String
+  },
+  noIcon: {
+    type: Boolean
   }
 })
 
@@ -46,10 +49,10 @@ const showOperator = computed(() => {
 <template>
   <icon-button
     variant="outline-danger"
-    class="search-breadcrumb-entry-query-term me-2 mb-2"
+    class="search-breadcrumb-entry-query-term"
     :class="classList"
     :style="style"
-    :icon-left="icon"
+    :icon-left="noIcon ? null : icon"
     icon-right="x"
     icon-right-hover-weight="bold"
   >