feat: use fixed occurrences width

src/components/Document/DocumentLocalSearch/DocumentLocalSearch.vue

@@ -39,7 +39,7 @@ const disabledNext = computed(() => props.activeIndex === props.occurrences || p
       @next="$emit('update:activeIndex', activeIndex + 1)"
     />
     <document-local-search-occurrences
-      v-if="modelValue"
+      :hidden="!modelValue"
       :active-index="activeIndex"
       :occurrences="occurrences"
       class="ms-2 align-self-center"

src/components/Document/DocumentLocalSearch/DocumentLocalSearchOccurrences.vue

@@ -10,7 +10,10 @@ const props = defineProps({
   },
   occurrences: {
     type: Number,
-    default: null
+    default: 0
+  },
+  hidden: {
+    type: Boolean
   },
   maxWidth: {
     type: String,
@@ -26,25 +29,27 @@ const label = computed(() => {
   return t('documentLocalSearchOccurrences.label', { activeIndex, occurrences })
 })
 
-const show = computed(() => {
-  return props.occurrences !== null
-})
-
 const style = computed(() => {
   return { maxWidth: props.maxWidth }
 })
 
 const key = computed(() => {
   return `${props.activeIndex}-${props.occurrences}`
 })
+
+const classList = computed(() => {
+  return {
+    'document-local-search-occurrences--hidden': props.hidden
+  }
+})
 </script>
 
 <template>
   <div
-    v-if="show"
     :key="key"
     v-ellipsis-tooltip="{ title: label }"
     class="document-local-search-occurrences"
+    :class="classList"
     :style="style"
   >
     {{ label }}
@@ -56,5 +61,10 @@ const key = computed(() => {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  width: 100%;
+
+  &--hidden {
+    visibility: hidden;
+  }
 }
 </style>

src/stories/components/Document/DocumentLocalSearch/DocumentLocalSearch.stories.js

@@ -1,13 +1,12 @@
 import DocumentLocalSearch from '@/components/Document/DocumentLocalSearch/DocumentLocalSearch'
 
 export default {
-  title: 'Components/Document/DocumentLocalSearch/DocumentLocalSearch',
+  title: 'Components/Document/DocumentLocalSearch/DocumentLocalSearchOccurences',
   component: DocumentLocalSearch,
   tags: ['autodocs'],
   args: {
     modelValue: '',
-    activeIndex: 0,
-    occurrences: 1478
+    activeIndex: 0
   },
   render: (args) => ({
     components: {
@@ -17,9 +16,15 @@ export default {
     template: `
       <document-local-search
         v-bind="args"
+        :occurrences="occurrences"
         @update:activeIndex="($event) => args.activeIndex = $event"
       />
-    `
+    `,
+    computed: {
+      occurrences() {
+        return Math.max(0, 16e4 - String(this.args.modelValue).length * 1e4)
+      }
+    }
   })
 }
 

src/stories/components/Document/DocumentLocalSearch/DocumentLocalSearchOccurrences.stories.js

@@ -0,0 +1,13 @@
+import DocumentLocalSearchOccurrences from '@/components/Document/DocumentLocalSearch/DocumentLocalSearchOccurrences'
+
+export default {
+  title: 'Components/Document/DocumentLocalSearch/DocumentLocalSearchOccurrences',
+  component: DocumentLocalSearchOccurrences,
+  tags: ['autodocs'],
+  args: {
+    activeIndex: 0,
+    occurrences: 1478
+  }
+}
+
+export const Default = {}