ep-lib-ts 1.0.24 → 1.0.25

package/dist/index.d.ts

@@ -18,6 +18,12 @@ import { default as EpEdu } from './components/educationals/EpEdu.vue';
 import { default as EpReading } from './components/educationals/EpReading.vue';
 import { default as EpResource } from './components/educationals/EpResource.vue';
 import { default as EpScope } from './components/educationals/EpScope.vue';
+import { default as EpObjective } from './components/educationals/EpObjective.vue';
+import { default as EpSpecificObjective } from './components/educationals/EpSpecificObjective.vue';
+import { default as EpIntroduction } from './components/educationals/EpIntroduction.vue';
+import { default as EpInstructions } from './components/educationals/EpInstructions.vue';
+import { default as EpDescription } from './components/educationals/EpDescription.vue';
+import { default as EpConclusion } from './components/educationals/EpConclusion.vue';
 import { default as EpAccordeon } from './components/interactions/EpAccordeon.vue';
 import { default as EpContentSlider } from './components/interactions/EpContentSlider.vue';
 import { default as EpModal } from './components/interactions/EpModal.vue';
@@ -42,4 +48,4 @@ import { default as EpHeader } from './components/signages/EpHeader.vue';
 import { default as EpQuote } from './components/signages/EpQuote.vue';
 import { default as EpSkeleton } from './components/signages/EpSkeleton.vue';
 
-export { EpBadge, EpBtn, EpCard, EpChip, EpDivider, EpFlex, EpIcon, EpImg, EpSection, EpSpinner, EpTable, EpBarChart, EpLineChart, EpPieChart, EpFunnelChart, EpText, EpEdu, EpReading, EpResource, EpScope, EpAccordeon, EpContentSlider, EpModal, EpQuestion, EpTabs, EpAudio, EpCarousel, EpIframe, EpKatex, EpLink, EpLinkVersion, EpSoftware, EpSvg, EpTerm, EpTimeLine, EpVideo, EpVideoPanopto, EpAlert, EpHeader, EpQuote, EpSkeleton, EpWordDef, EpSummativeTable };
+export { EpBadge, EpBtn, EpCard, EpChip, EpDivider, EpFlex, EpIcon, EpImg, EpSection, EpSpinner, EpTable, EpBarChart, EpLineChart, EpPieChart, EpFunnelChart, EpText, EpEdu, EpReading, EpResource, EpScope, EpAccordeon, EpContentSlider, EpModal, EpQuestion, EpTabs, EpAudio, EpCarousel, EpIframe, EpKatex, EpLink, EpLinkVersion, EpSoftware, EpSvg, EpTerm, EpTimeLine, EpVideo, EpVideoPanopto, EpAlert, EpHeader, EpQuote, EpSkeleton, EpWordDef, EpSummativeTable, EpObjective, EpSpecificObjective, EpIntroduction, EpInstructions, EpDescription, EpConclusion };

package/dist/style.css

@@ -1 +1 @@
-.content[data-v-761f0542]{max-height:0;overflow:hidden}.modal-mask{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;transition:opacity .3s ease}.modal-container{margin:auto;max-height:95%;transition:all .3s ease;z-index:9999}.modal-header h3{margin-top:0;color:#42b983}.modal-body{margin:20px 0}.modal-default-button{float:right}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-from .modal-container,.modal-leave-to .modal-container{transform:scale(1.1)}.custom_index{z-index:9999;position:absolute;right:12rem}.h-custom{height:30rem}.p-custom p{margin-bottom:1em}.v-enter-active[data-v-a9b3f460],.v-leave-active[data-v-a9b3f460]{transition:opacity .5s ease}.v-enter-from[data-v-a9b3f460],.v-leave-to[data-v-a9b3f460]{opacity:0}.katex[data-v-a5d595cd]{font-size:1.6em}.content[data-v-713dbd30]{max-height:0;overflow:hidden}.list-enter-active,.list-leave-active{transition:all .5s ease}.list-enter-from,.list-leave-to{opacity:0;transform:translate(30px)}.shape{height:var(--3e2ed539);width:var(--7e73c118)}.arrow-light-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,.2) transparent transparent transparent}.arrow-dark-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:black transparent transparent transparent}.arrow-light-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid #eee;border-left:7px solid transparent;border-bottom-color:#0003}.arrow-dark-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid black;border-left:7px solid transparent;border-bottom-color:black transparent transparent transparent}.arrow-light-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid #eee;border-bottom:5px solid transparent;border-left-color:#0003}.arrow-dark-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid black;border-bottom:5px solid transparent;border-left-color:black transparent transparent transparent}.arrow-light-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid #eee;border-bottom:5px solid transparent;border-right-color:#0003}.arrow-dark-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid black;border-bottom:5px solid transparent;border-right-color:black transparent transparent transparent}
+.content[data-v-3a321611]{max-height:0;overflow:hidden}.modal-mask{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;transition:opacity .3s ease}.modal-container{margin:auto;max-height:95%;transition:all .3s ease;z-index:9999}.modal-header h3{margin-top:0;color:#42b983}.modal-body{margin:20px 0}.modal-default-button{float:right}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-from .modal-container,.modal-leave-to .modal-container{transform:scale(1.1)}.custom_index{z-index:9999;position:absolute;right:12rem}.shape{height:var(--57a4c52c);width:var(--32b5e5ba)}.v-enter-active[data-v-a9b3f460],.v-leave-active[data-v-a9b3f460]{transition:opacity .5s ease}.v-enter-from[data-v-a9b3f460],.v-leave-to[data-v-a9b3f460]{opacity:0}.katex[data-v-a5d595cd]{font-size:1.6em}.content[data-v-713dbd30]{max-height:0;overflow:hidden}.list-enter-active,.list-leave-active{transition:all .5s ease}.list-enter-from,.list-leave-to{opacity:0;transform:translate(30px)}.arrow-light-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,.2) transparent transparent transparent}.arrow-dark-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:black transparent transparent transparent}.arrow-light-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid #eee;border-left:7px solid transparent;border-bottom-color:#0003}.arrow-dark-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid black;border-left:7px solid transparent;border-bottom-color:black transparent transparent transparent}.arrow-light-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid #eee;border-bottom:5px solid transparent;border-left-color:#0003}.arrow-dark-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid black;border-bottom:5px solid transparent;border-left-color:black transparent transparent transparent}.arrow-light-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid #eee;border-bottom:5px solid transparent;border-right-color:#0003}.arrow-dark-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid black;border-bottom:5px solid transparent;border-right-color:black transparent transparent transparent}

package/dist/types/Answer.d.ts

@@ -1,4 +1,5 @@
 import { TypeAlert } from './Alert';
+import { MediaVariants } from './Medias';
 
 interface ContentComponent {
     type?: string;
@@ -13,4 +14,20 @@ export interface Answer {
     uid?: string;
     component?: ContentComponent | null;
 }
+export interface Question {
+    title?: string;
+    intentions?: string;
+    labelIntentions?: string;
+    hideIcon?: boolean;
+    type?: MediaVariants;
+    question: string;
+    answers: Answer[];
+    shuffle?: boolean;
+    before?: boolean;
+    numeration?: boolean;
+    src?: string | null;
+    labelNoAnswer?: string;
+    labelAnswerBtn?: string;
+    labelTryAgainBtn?: string;
+}
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "1.0.24",
+  "version": "1.0.25",
   "files": [
     "dist",
     "src/components/"
@@ -51,7 +51,7 @@
     "typescript": "^5.6.2",
     "vite": "^5.4.5",
     "vite-plugin-dts": "^3.9.0",
-    "vue-tsc": "^2.1.6"
+    "vue-tsc": "^2.1.10"
   },
   "peerDependencies": {
     "vue": "^3.2.45"

package/src/components/basics/EpFlex.vue

@@ -40,3 +40,4 @@ const styles = computed(() => {
   </div>
 </template>
 
+//TODO component

package/src/components/basics/EpSection.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { toRefs } from "vue";
+import { useColorMode } from '@vueuse/core';
 // import EpCard from "../basics/EpCard.vue";
 // import EpDivider from "../basics/EpDivider.vue";
 // import EpIcon from "../basics/EpIcon.vue";
@@ -25,8 +26,6 @@ interface Props {
   synchrone?: boolean;
 }
 
-// type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
-
 const props = withDefaults(defineProps<Props>(), {
   title: null,
   icon: null,
@@ -34,12 +33,11 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const { title, color, src } = toRefs(props);
+const mode = useColorMode();
 </script>
 
 <template>
-  <!-- <EpChip color="secondary" :prependIcon="mdiChairSchool">Formatif</EpChip> -->
-
-  <section class="EpSection">
+  <section :class="{'bg-gray-800 text-white': mode === 'dark', 'bg-white text-black': mode === 'light'}" class="EpSection">
     <div class="relative items-center w-full">
       <div class="w-full mx-auto text-left">
         <div class="relative flex-col items-center m-auto align-middle">
@@ -55,9 +53,7 @@ const { title, color, src } = toRefs(props);
             <div class="flex flex-col space-y-20 lg:mt-0">
               <div class="border-b">
                 <div>
-                  <p
-                    class="text-2xl font-medium tracking-tight text-black sm:text-4xl"
-                  >
+                  <p class="text-2xl font-medium tracking-tight">
                     {{ title }}
                   </p>
                   <p>
@@ -74,6 +70,7 @@ const { title, color, src } = toRefs(props);
       </div>
     </div>
   </section>
+</template>
 
   <!-- <section class="h-screen flex flex-col justify-end">
     <div
@@ -241,4 +238,3 @@ const { title, color, src } = toRefs(props);
       </div>
     </div>
   </div> -->
-</template>

package/src/components/educationals/EpConclusion.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { toRefs } from "vue";
+import EpIcon from "../basics/EpIcon.vue";
+
+interface Props {
+  icon?: string | null;
+  title?: string | null;
+  subtitle? :string | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "Conclusion",
+});
+const { title, icon, subtitle } = toRefs(props);
+</script>
+<template>
+	<div class="lg:grid lg:grid-cols-12 lg:gap-8">
+	  <div class="lg:col-span-2">
+		<h2
+		  class="text-pretty text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-100 sm:text-xl"
+		>
+		<EpIcon v-if="icon" :icon-path="icon" size="28" extraClass="mr-2"></EpIcon>
+		  {{ title }}
+		</h2>
+	  </div>
+	  <div class="mt-10 lg:col-span-8 lg:mt-0 lg:border-l dark:border-gray-700 lg:pl-4">
+		<div class="py-2">
+		  <h3 v-if="subtitle" class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
+			{{subtitle}}
+		  </h3>
+		  <div class="text-gray-600 dark:text-gray-300">
+            <slot></slot>
+          </div>
+		</div>
+	  </div>
+	</div>
+  </template>
+  

package/src/components/educationals/EpDescription.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { toRefs } from "vue";
+import EpIcon from "../basics/EpIcon.vue";
+
+interface Props {
+  icon?: string | null;
+  title?: string | null;
+  subtitle? :string | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "Description",
+});
+const { title, icon, subtitle } = toRefs(props);
+</script>
+<template>
+	<div class="lg:grid lg:grid-cols-12 lg:gap-8">
+	  <div class="lg:col-span-2">
+		<h2
+		  class="text-pretty text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-100 sm:text-xl"
+		>
+		<EpIcon v-if="icon" :icon-path="icon" size="28" extraClass="mr-2"></EpIcon>
+		  {{ title }}
+		</h2>
+	  </div>
+	  <div class="mt-10 lg:col-span-8 lg:mt-0 lg:border-l dark:border-gray-700 lg:pl-4">
+		<div class="py-2">
+		  <h3 v-if="subtitle" class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
+			{{subtitle}}
+		  </h3>
+		  <div class="text-gray-600 dark:text-gray-300">
+            <slot></slot>
+          </div>
+		</div>
+	  </div>
+	</div>
+  </template>
+  

package/src/components/educationals/EpInstructions.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { toRefs } from "vue";
+import EpIcon from "../basics/EpIcon.vue";
+import EpAccordeon from "../interactions/EpAccordeon.vue";
+
+type Instructions = {
+    uid:string;
+    title:string;
+    content:string;
+}
+
+interface Props {
+  icon?: string | null;
+  title?: string | null;
+  subtitle? :string | null;
+  instructions:Instructions[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "Consignes",
+});
+
+const { title, icon, subtitle } = toRefs(props);
+
+</script>
+<template>
+	<div class="lg:grid lg:grid-cols-12 lg:gap-8">
+	  <div class="lg:col-span-2">
+		<h2
+		  class="text-pretty text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-100 sm:text-xl"
+		>
+		<EpIcon v-if="icon" :icon-path="icon" size="28" extraClass="mr-2"></EpIcon>
+		  {{ title }}
+		</h2>
+	  </div>
+	  <div class="mt-10 lg:col-span-8 lg:mt-0 lg:border-l dark:border-gray-700 lg:pl-4">
+		<div class="py-2">
+			<template v-for="instruction in instructions" :key="`instruction-${instruction.uid}`">
+				<EpAccordeon small outlined :title="instruction.title">
+					<div v-html="instruction.content"></div>
+				</EpAccordeon>
+			</template>
+        
+		</div>
+	  </div>
+	</div>
+  </template>
+  

package/src/components/educationals/EpIntroduction.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { toRefs } from "vue";
+import EpIcon from "../basics/EpIcon.vue";
+
+interface Props {
+  icon?: string | null;
+  title?: string | null;
+  subtitle? :string | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "Introduction",
+});
+const { title, icon, subtitle } = toRefs(props);
+</script>
+<template>
+	<div class="lg:grid lg:grid-cols-12 lg:gap-8">
+	  <div class="lg:col-span-2">
+		<h2
+		  class="text-pretty text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-100 sm:text-xl"
+		>
+		<EpIcon v-if="icon" :icon-path="icon" size="28" extraClass="mr-2"></EpIcon>
+		  {{ title }}
+		</h2>
+	  </div>
+	  <div class="mt-10 lg:col-span-8 lg:mt-0 lg:border-l dark:border-gray-700 lg:pl-4">
+		<div class="py-2">
+		  <h3 v-if="subtitle" class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
+			{{subtitle}}
+		  </h3>
+		  <div class="text-gray-600 dark:text-gray-300">
+            <slot></slot>
+          </div>
+		</div>
+	  </div>
+	</div>
+  </template>
+  

package/src/components/educationals/EpObjective.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+
+interface Props {
+    nameApproach?:string | null;
+    title?:string|null;
+    color?:`border-${string}`;
+}
+
+const props = withDefaults(defineProps<Props>(),{
+    color:'border-gray'
+})
+
+</script>
+
+<template>
+  <div :class="`border-l-8
+    ${color} 
+    p-4 
+    my-3 
+    transition 
+    duration-200 
+    ease-in-out 
+    outline-primary 
+    focus-within:outline 
+    focus-within:outline-1 
+    outline-offset-4 
+    hover:outline 
+    hover:outline-1 
+    hover:outline-gray-200 
+    dark:hover:outline-gray-700`">
+    <div class="flex flex-row divide-x gap-x-4">
+      <div class="w-32">
+        {{ nameApproach }}
+      </div>
+      <div class="flex-1 pl-4">
+        <h4 class="font-medium mb-1">{{ title }}</h4>
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/educationals/EpReading.vue

@@ -182,7 +182,7 @@ const errorImg = (event:Event)=>{
                     <template v-if="!hideCover">
                       <img
                         v-if="hasCover"
-                        class="object-cover h-96 w-full rounded-t-lg object-cover md:h-auto md:w-56 md:rounded-none md:rounded-l-lg "
+                        class="object-cover h-96 w-full rounded-t-lg md:h-auto md:w-56 md:rounded-none md:rounded-l-lg "
                         :src="cover"
                         :alt="`image de la lecture ${title}`"
                         @error="errorImg"

package/src/components/educationals/EpSpecificObjective.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from "vue";
+interface Props {
+  label?: string | null;
+  title?: string | null;
+  color?: `border-${string}`;
+  tab?: boolean;
+  content?: string | null;
+  bg?: boolean;
+  border?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: "border-gray",
+  tab: false,
+  border: false,
+});
+
+const styles = computed(() => {
+  return `
+  ${props.tab ? "border-l-8" : ""} 
+  ${props.bg ? "bg-gray-50 dark:border-gray-50 dark:text-dark" : ""} 
+  ${props.border ? "ring-1 dark:ring-gray-50" : ""}
+  `;
+});
+</script>
+<template>
+    <div :class="`${styles} rounded-lg ring-gray-900/5 p-4`">
+      <dl class="flex flex-nowrap gap-x-4">
+        <div v-if="label" class="flex-none self-center">
+          <div
+            class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-primary-700 ring-1 ring-inset ring-primary-600/20"
+          >
+            {{ label }}
+          </div>
+        </div>
+        <div class="flex-auto">
+          <dd :class="`mt-1 text-base font-base text-gray-900 ${bg?'dark:text-dark':'dark:text-gray-300'}`">{{ content }}</dd>
+        </div>
+      </dl>
+    </div>
+</template>

package/src/components/forms/EpSelect.vue

@@ -1,163 +1,27 @@
 <script setup lang="ts">
+import { defineProps } from 'vue';
 
-import EpBadge from "../basics/EpBadge.vue";
-import { mdiLockOutline } from "@mdi/js";
+type Option = { text: string; value: string };
 
-interface Props {
-  id?: string;
-  label?: string;
-  modelValue?: string;
-  type?:
-    | "text"
-    | "email"
-    | "url"
-    | "password"
-    | "number"
-    | "date"
-    | "search"
-    | "tel"
-    | "time";
-  placeholder?: string;
-  iconPath?: string;
-  iconSize?: string;
-  disabled?: boolean;
-  readonly?: boolean;
-  labels?:{
-    option?:string;      
-    vanderpoel?:string; 
-    vanaert?:string;    
-    pogacar?:string;    
-    evenepoel?:string;  
-    meilleur?:string;   
-  }
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  id: "0",
-  label: "label",
-  modelValue: "",
-  type: "text",
-  placeholder: "",
-  iconPath: "",
-  iconSize: "",
-  disabled: false,
-  labels:()=>{
-    return {
-      option:"Choisissez une option",
-      vanderpoel:"Van Der Poel",
-      vanaert:"Van Aert",
-      pogacar:"Pogacar",
-      evenepoel:"Evenepoel",
-      meilleur:"Quel est le meilleur cycliste"
-    }
-  }
-});
+const props = defineProps<{
+  options: Option[];
+  modelValue: string;
+}>();
 
+const model = defineModel()
 
 </script>
 
 <template>
-<div class="relative h-10 w-72 min-w-[200px]">
-  <select :disabled="disabled" class="
-  peer 
-  h-full 
-  w-full 
-  rounded-[7px] 
-  border 
-  border-neutral-300
-  border-t-transparent 
-  bg-transparent 
-  px-3 
-  py-2.5 
-  font-sans 
-  text-sm 
-  font-normal 
-  text-blue-gray-700 
-  outline 
-  outline-0 
-  transition-all 
-  placeholder-shown:border 
-  placeholder-shown:border-blue-gray-200 
-  placeholder-shown:border-t-blue-gray-200 
-  empty:!bg-red-500 
-  focus:border-2 
-  focus:border-blue-500 
-  focus:border-t-transparent 
-  focus:outline-4 
-  placeholder-shown:outline-0
-  disabled:border-0 
-  disabled:cursor-not-allowed
-  disabled:bg-neutral-200
-  focus:ring-0
-  ">
-    <option value="option">{{labels.option}}</option>
-    <option value="vanderpoel">{{labels.vanderpoel}}</option>
-    <option value="vanaert">{{labels.vanaert}}</option>
-    <option value="pogacar">{{labels.pogacar}}</option>
-    <option value="evenepoel">{{labels.evenepoel}}</option>
-  </select>
-  <label class="before:content[' '] 
-  after:content[' '] 
-  pointer-events-none 
-  absolute 
-  left-0 
-  border-red-500
-  -top-1.5 
-  flex 
-  h-full 
-  w-full 
-  select-none 
-  text-[11px] 
-  font-normal 
-  leading-tight 
-  text-blue-gray-400 
-  transition-all 
-  before:pointer-events-none 
-  before:mt-[6.5px] 
-  before:mr-1 
-  before:box-border 
-  before:block 
-  before:h-1.5 
-  before:w-2.5 
-  before:rounded-tl-md 
-  before:border-t 
-  before:border-l 
-  before:border-blue-gray-200 
-  before:transition-all 
-  after:pointer-events-none 
-  after:mt-[6.5px] 
-  after:ml-1 
-  after:box-border 
-  after:block 
-  after:h-1.5 
-  after:w-2.5 
-  after:flex-grow 
-  after:rounded-tr-md 
-  after:border-t 
-  after:border-r 
-  after:border-blue-gray-200 
-  after:transition-all 
-  peer-placeholder-shown:text-sm 
-  peer-placeholder-shown:leading-[3.75] 
-  peer-placeholder-shown:text-blue-gray-500 
-  peer-placeholder-shown:before:border-transparent 
-  peer-placeholder-shown:after:border-transparent 
-  peer-focus:text-[11px] 
-  peer-focus:leading-tight 
-  peer-focus:text-blue-500 
-  peer-focus:before:border-t-2 
-  peer-focus:before:border-l-2 
-  peer-focus:before:border-blue-500 
-  peer-focus:after:border-t-2 
-  peer-focus:after:border-r-2 
-  peer-focus:after:border-blue-500 
-  peer-disabled:text-transparent 
-  peer-disabled:before:border-transparent 
-  peer-disabled:after:border-transparent 
-  peer-disabled:peer-placeholder-shown:text-blue-gray-500
-  ">
-    {{labels.meilleur}}
-  </label>
-  <EpBadge :iconPath="mdiLockOutline" />
-</div>
+  <div class="w-full max-w-xs">
+    <label class="block text-sm font-medium text-gray-700 mb-1">Select Theme:</label>
+    <select
+      v-model="model"
+      class="block w-full bg-white border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+    >
+      <option v-for="option in options" :key="option.value" :value="option.value">
+        {{ option.text }}
+      </option>
+    </select>
+  </div>
 </template>

package/src/components/interactions/EpAccordeon.vue

@@ -10,6 +10,7 @@ interface Props {
   open?: boolean;
   outlined?:boolean;
   title?:string | null
+  small?:boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), { 
@@ -31,7 +32,7 @@ const isOutlined = computed(()=>{
 })
 
 const stylesHeader = computed(()=>{
-  return `flex justify-between items-center px-4 py-2 cursor-pointer ${typeAccordeon[props.type]?.[isOutlined.value]}`
+  return `flex justify-between items-center px-4 ${props.small?'py-1':'py-2'} cursor-pointer ${typeAccordeon[props.type]?.[isOutlined.value]}`
 })
 
 const contentStyles = computed(()=>{
@@ -60,20 +61,20 @@ function toggleDivVisibility() {
 }
 
 
-const {title, icon } = toRefs(props)
+const {title, icon, small } = toRefs(props)
 </script>
 
 <template>
   <div>
     <div :class="stylesHeader" @click="toggleDivVisibility">
-      <h3 class="text-lg flex items-center"><EpIcon v-if="icon" :icon-path="icon" size="28" extraClass="mr-2"></EpIcon>{{ title }}</h3>
+      <h3 :class="`${small?'text':'text-lg'} flex items-center`"><EpIcon v-if="icon" :icon-path="icon" size="28" extraClass="mr-2"></EpIcon>{{ title }}</h3>
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
         :class="`mx-4 my-3 h-6 w-6 transition-all duration-200 ${showDiv ? 'rotate-45' : ''}`">
         <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
       </svg>
     </div>
     <div ref="collapsible" :class="`${contentStyles} content`">
-      <div class="py-4">
+      <div class="py-3">
   
         <slot></slot>