From 64046f4d126b2d690ae7f2fb13431b981ccb9088 Mon Sep 17 00:00:00 2001
From: LucasWerey <lucas.werey@hotmail.com>
Date: Thu, 25 Jan 2024 21:45:29 +0100
Subject: [PATCH] fix(dslib): fix selectfield and offerCard

---
 package.json                                  |  2 +-
 .../CTA/SelectField/SelectField.story.vue     |  4 +++
 .../CTA/SelectField/SelectField.vue           | 25 +++++++++++++++++--
 .../Containment/OfferCard/OfferCard.story.vue |  4 +--
 .../Containment/OfferCard/OfferCard.vue       |  2 +-
 5 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 630a6a2..ba6ab9d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lucaswerey/dslib-pfe",
-  "version": "0.0.68",
+  "version": "0.0.69",
   "private": false,
   "main": "./lib/index.umd.js",
   "module": "./lib/index.mjs",
diff --git a/src/components/CTA/SelectField/SelectField.story.vue b/src/components/CTA/SelectField/SelectField.story.vue
index 59a95b3..7ada946 100644
--- a/src/components/CTA/SelectField/SelectField.story.vue
+++ b/src/components/CTA/SelectField/SelectField.story.vue
@@ -36,6 +36,10 @@ const controls = reactive<Controls>({
     { value: 'Mois', label: 'Mois' },
     { value: 'Années', label: 'Années' },
     { value: 'Semaines', label: 'Semaines' },
+    { value: 'Jours', label: 'Jours' },
+    { value: 'Jours', label: 'Jours' },
+    { value: 'Jours', label: 'Jours' },
+    { value: 'Jours', label: 'Jours' },
     { value: 'Jours', label: 'Jours' }
   ],
   default: 'Mois',
diff --git a/src/components/CTA/SelectField/SelectField.vue b/src/components/CTA/SelectField/SelectField.vue
index e395362..a851447 100644
--- a/src/components/CTA/SelectField/SelectField.vue
+++ b/src/components/CTA/SelectField/SelectField.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-[72px] w-[200px] flex-col gap-2">
+  <div class="flex h-[72px] w-[200px] flex-col gap-2" @focusout="open = false">
     <h1 class="font-eina1 text-2 font-bold uppercase text-basic-black">
       {{ title }}
     </h1>
@@ -18,7 +18,7 @@
           color="darkgrey"
         />
       </div>
-      <div class="items absolute z-10 w-full" v-show="open">
+      <div class="items scrollbar absolute z-10 max-h-[150px] w-full overflow-auto" v-show="open">
         <div
           v-for="(option, i) of options"
           :key="i"
@@ -75,3 +75,24 @@ const handleClick = (option: SelectFieldOption) => {
 
 const emit = defineEmits(['update:modelValue'])
 </script>
+
+<style scoped>
+.scrollbar::-webkit-scrollbar {
+  width: 4px;
+}
+
+.scrollbar::-webkit-scrollbar-track {
+  @apply bg-primary-lightmoonstone;
+  border-radius: 40px;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+  @apply bg-primary-moonstone;
+  border-radius: 40px;
+}
+
+.scrollbar::-webkit-scrollbar-thumb:hover {
+  @apply bg-primary-moonstone;
+  border-radius: 40px;
+}
+</style>
diff --git a/src/components/Containment/OfferCard/OfferCard.story.vue b/src/components/Containment/OfferCard/OfferCard.story.vue
index 430e785..1b6c65d 100644
--- a/src/components/Containment/OfferCard/OfferCard.story.vue
+++ b/src/components/Containment/OfferCard/OfferCard.story.vue
@@ -41,7 +41,7 @@
       </ControlDescription>
     </template>
 
-    <template #default>
+    <Variant title="playground" auto-props-disabled>
       <OfferCard
         :type="controls.type"
         :title="controls.title"
@@ -55,7 +55,7 @@
         @seeOffer="() => {}"
         @createOffer="() => {}"
       />
-    </template>
+    </Variant>
   </Story>
 </template>
 
diff --git a/src/components/Containment/OfferCard/OfferCard.vue b/src/components/Containment/OfferCard/OfferCard.vue
index 9fc385e..f4c0170 100644
--- a/src/components/Containment/OfferCard/OfferCard.vue
+++ b/src/components/Containment/OfferCard/OfferCard.vue
@@ -39,7 +39,7 @@
             />
           </div>
           <p class="font-eina1 text-3 font-semibold text-basic-black">
-            {{ nCandidates }} candidats
+            {{ nCandidates ?? 0 }} {{ (nCandidates ?? 0) > 1 ? 'candidats' : 'candidat' }}
           </p>
         </div>
         <Button