From 3dbec4e888f57dc46a8cdc140185db1708ffe665 Mon Sep 17 00:00:00 2001
From: Pierre Romera <hello@pirhoo.com>
Date: Tue, 23 Jul 2024 11:12:10 +0000
Subject: [PATCH] feat: use fixed occurrences width

---
 .../DocumentLocalSearch.vue                   |  2 +-
 .../DocumentLocalSearchOccurrences.vue        | 22 ++++++++++++++-----
 .../DocumentLocalSearch.stories.js            | 13 +++++++----
 .../DocumentLocalSearchOccurrences.stories.js | 13 +++++++++++
 4 files changed, 39 insertions(+), 11 deletions(-)
 create mode 100644 src/stories/components/Document/DocumentLocalSearch/DocumentLocalSearchOccurrences.stories.js

diff --git a/src/components/Document/DocumentLocalSearch/DocumentLocalSearch.vue b/src/components/Document/DocumentLocalSearch/DocumentLocalSearch.vue
index 5624e78178..c5afaab4ea 100644
--- a/src/components/Document/DocumentLocalSearch/DocumentLocalSearch.vue
+++ b/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"
diff --git a/src/components/Document/DocumentLocalSearch/DocumentLocalSearchOccurrences.vue b/src/components/Document/DocumentLocalSearch/DocumentLocalSearchOccurrences.vue
index 644e9c56d4..e51250d7d5 100644
--- a/src/components/Document/DocumentLocalSearch/DocumentLocalSearchOccurrences.vue
+++ b/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,10 +29,6 @@ const label = computed(() => {
   return t('documentLocalSearchOccurrences.label', { activeIndex, occurrences })
 })
 
-const show = computed(() => {
-  return props.occurrences !== null
-})
-
 const style = computed(() => {
   return { maxWidth: props.maxWidth }
 })
@@ -37,14 +36,20 @@ const style = computed(() => {
 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>
diff --git a/src/stories/components/Document/DocumentLocalSearch/DocumentLocalSearch.stories.js b/src/stories/components/Document/DocumentLocalSearch/DocumentLocalSearch.stories.js
index 800f83e4fa..9d83ed8df2 100644
--- a/src/stories/components/Document/DocumentLocalSearch/DocumentLocalSearch.stories.js
+++ b/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)
+      }
+    }
   })
 }
 
diff --git a/src/stories/components/Document/DocumentLocalSearch/DocumentLocalSearchOccurrences.stories.js b/src/stories/components/Document/DocumentLocalSearch/DocumentLocalSearchOccurrences.stories.js
new file mode 100644
index 0000000000..1b2c2b2655
--- /dev/null
+++ b/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 = {}