chore: 🎨 améliore le code de DsfrMultiselect

dnum-mi · Oct 31, 2024 · 469c60b · 469c60b
1 parent e2e6450
commit 469c60b
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git a/src/components/DsfrMultiselect/DsfrMultiselect.spec.ts b/src/components/DsfrMultiselect/DsfrMultiselect.spec.ts
@@ -1,4 +1,5 @@
 import { fireEvent, render } from '@testing-library/vue'
+
 import DsfrMultiselect from './DsfrMultiselect.vue'
 
 describe('DsfrMultiselect', () => {

diff --git a/src/components/DsfrMultiselect/DsfrMultiselect.vue b/src/components/DsfrMultiselect/DsfrMultiselect.vue
@@ -1,15 +1,16 @@
 <script lang="ts" setup generic="T extends Object | string | number">
-import { getRandomId } from '@/utils/random-utils'
 import { computed, onUnmounted, ref } from 'vue'
 
 import { useCollapsable } from '../../composables'
 import DsfrButton from '../DsfrButton/DsfrButton.vue'
 import DsfrCheckbox from '../DsfrCheckbox/DsfrCheckbox.vue'
 import DsfrFieldset from '../DsfrFieldset/DsfrFieldset.vue'
-
 import DsfrInput from '../DsfrInput/DsfrInput.vue'
+
 import type { DsfrMultiSelectProps, DsfrMultiSelectSlots } from './DsfrMultiselect.types'
 
+import { getRandomId } from '@/utils/random-utils'
+
 const props = withDefaults(
   defineProps<DsfrMultiSelectProps<T>>(),
   {
@@ -285,10 +286,13 @@ onUnmounted(() => {
 
 const defaultButtonLabel = computed(() => {
   const nbElements = model.value?.length
-  if (nbElements === 0) {
+  const noElements = nbElements === 0
+  const severalElements = nbElements > 1
+
+  if (noElements) {
     return 'Sélectionner une option'
   }
-  return `${nbElements} option${nbElements > 1 ? 's' : ''} sélectionnée${nbElements > 1 ? 's' : ''}`
+  return `${nbElements} option${severalElements ? 's' : ''} sélectionnée${severalElements ? 's' : ''}`
 })
 
 const finalLabelClass = computed(() => [
@@ -507,14 +511,14 @@ const finalLabelClass = computed(() => [
 }
 
 .fr-multiselect__collapse {
-  z-index: 20000;
+  z-index: 1;
   position: absolute;
   transform-origin: left top;
   width: var(--width-host);
   left: var(--left-position);
   top: var(--top-position);
   padding: 1rem;
-  margin-top: 4px;
+  margin-top: 0.5rem;
   background-color: var(--background-overlap-grey);
   filter: drop-shadow(var(--overlap-shadow));
 }

diff --git a/src/components/DsfrMultiselect/docs-demo/DsfrMultiselectDemoComplexe.vue b/src/components/DsfrMultiselect/docs-demo/DsfrMultiselectDemoComplexe.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+
 import DsfrMultiselect from '../DsfrMultiselect.vue'
 
 const options = [

diff --git a/src/components/DsfrMultiselect/docs-demo/DsfrMultiselectDemoSimple.vue b/src/components/DsfrMultiselect/docs-demo/DsfrMultiselectDemoSimple.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import DsfrMultiselect from '../DsfrMultiselect.vue'
 
 const options = [