ep-lib-ts 1.0.1 → 1.0.4

package/src/components/charts/EpFunnelChart.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { computed, toRefs } from "vue";
+import EpEdu from "../educationals/EpEdu.vue";
+import { mdiTriangle } from '@mdi/js';
+import { type MediaVariants } from "../../types/Medias";
+import { isHtml } from "../../composables/isHtml";
+import { useMarkdown } from "../../composables/useMarkdown";
+
+interface OptionsFormmater{
+    dataPointIndex:number;
+    w:{globals:{
+        labels:string[]
+    }}
+}
+
+interface seriesFunnel {
+    name: string,
+    data: number[]
+}
+
+interface Props {
+    series: seriesFunnel[];
+    labels: string[];
+    //options: OptionsFunnelChart;
+    id?: string;
+    title?:string;
+    center?: boolean;
+    intentions?: string;
+    hideIcon?: boolean;
+    type?: MediaVariants;
+    mandateLevel?: string | null;
+    source?: string;
+    width?: string;
+    height?: number;
+    isFunnel?:boolean;
+    colors?:string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    center: true,
+    type: 'base',
+    width: "800",
+    height: 350,
+    isFunnel:true,
+    colors:()=>[
+          '#283243',
+          '#3b4f6d',
+          '#465e87',
+          '#5072a5',
+          '#648bb9',
+          '#6e9ac3',
+          '#8ab3d0',
+          '#b0cee0',]
+});
+
+
+const renderText = computed(() => {
+    if (!props.intentions) {
+        return null;
+    }
+    if (!isHtml(props.intentions)) {
+        return useMarkdown(props.intentions);
+    }
+    return props.intentions;
+});
+
+const optionsFunnel = computed(()=> {
+    return {
+      chart: {
+        type: 'bar',
+        height: props.height,
+      },
+      plotOptions: {
+        bar: {
+          borderRadius: 0,
+          horizontal: true,
+          distributed: true,
+          barHeight: '80%',
+          isFunnel: props.isFunnel,
+        },
+      },
+      colors: props.colors,
+      dataLabels: {
+        enabled: true,
+        formatter: function (val:string, opt:OptionsFormmater) {
+            let label = ''
+            if(opt.w.globals.labels[opt.dataPointIndex]){
+                label = opt.w.globals.labels[opt.dataPointIndex] + ':  '
+            }
+          return label + val
+        },
+        dropShadow: {
+          enabled: true,
+        },
+      },
+      xaxis: {
+        categories: props.labels
+      },
+      legend: {
+        show: false,
+      },
+    }
+})
+
+
+const { center, series, source, labels, width } = toRefs(props)
+
+
+</script>
+
+<template>
+
+    <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiTriangle"
+        :mandateLevel="mandateLevel">
+        <template #intentions v-if="renderText">
+
+            <div v-html="renderText"></div>
+        </template>
+        <template #content>
+            <div :class="`p-4 ${center ? 'flex justify-center' : ''}`" v-if="labels && series">
+                <apexchart type="bar" :width="width" :height="height" :options="optionsFunnel"
+                    :series="series"></apexchart>
+            </div>
+        </template>
+        <template #actions v-if="source">
+            <p>{{ source }}</p>
+        </template>
+    </EpEdu>
+</template>

package/src/components/charts/EpLineChart.vue

@@ -2,7 +2,7 @@
 import { computed, toRefs } from "vue";
 import EpEdu from "../educationals/EpEdu.vue";
 import { mdiChartLine } from "@mdi/js";
-import { MediaVariants } from "../../types/Medias";
+import { type MediaVariants } from "../../types/Medias";
 import { isHtml } from "../../composables/isHtml";
 import { useMarkdown } from "../../composables/useMarkdown";
 
@@ -31,11 +31,19 @@ interface Props {
     mandateLevel?: string | null;
     source?: string;
     width?:string;
+    labels?:{
+        dataNoDisponible?:string;  
+    }
 }
 
 const props = withDefaults(defineProps<Props>(), {
     center: true,
-    width:"500"
+    width:"500",
+    labels:()=>{
+        return {
+            dataNoDisponible:"Data no disponible"
+            }    
+        }
 });
 
 const renderText = computed(() => {
@@ -81,7 +89,7 @@ const { center, series, source, width} = toRefs(props)
                 <apexchart :width="width" type="line" :options="globalOptions" :series="series"></apexchart>
             </div>
             <div v-else>
-                <p>Data no disponible</p>
+                <p>{{labels.dataNoDisponible}}</p>
             </div>
         </template>
         <template #actions v-if="source">

package/src/components/charts/EpPieChart.vue

@@ -2,7 +2,7 @@
 import { computed, toRefs } from "vue";
 import EpEdu from "../educationals/EpEdu.vue";
 import { mdiChartPie } from '@mdi/js';
-import { MediaVariants } from "../../types/Medias";
+import { type MediaVariants } from "../../types/Medias";
 import { isHtml } from "../../composables/isHtml";
 import { useMarkdown } from "../../composables/useMarkdown";
 
@@ -33,13 +33,21 @@ interface Props {
     type?: MediaVariants;
     mandateLevel?: string | null;
     source?: string;
-    width?:string
+    width?:string;
+    labels?:{
+        dataNoDisponible?:string; 
+    }
 }
 
 const props = withDefaults(defineProps<Props>(), {
     center: true,
     type:'base',
-    width:"450"
+    width:"450",
+    labels:()=>{
+        return {
+            dataNoDisponible:"Data no disponible"
+            }    
+        }
 });
 
 
@@ -70,7 +78,7 @@ const { center, series, source, options, width } = toRefs(props)
                 <apexchart :width="width" type="pie" :options="options" :series="series"></apexchart>
             </div>
             <div v-else>
-                <p>Data no disponible</p>
+                <p>{{labels.dataNoDisponible}}</p>
             </div>
         </template>
         <template #actions v-if="source">

package/src/components/educationals/EpCodeblock.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
   import VCodeBlock from '@wdns/vue-code-block';   
   import {defaultOption} from "../../types/Codeblock";
-  import Theme from "../../types/Codeblock";
+  import type Theme from "../../types/Codeblock";
   import { computed} from "vue";
   import { ref } from "vue"; 
 

package/src/components/educationals/EpEdu.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { toRefs, computed, useSlots } from "vue";
 //types with capital letter, object styles in lowercase
-import { MediaVariants, mediaVariants } from "../../types/Medias";
-import { MandateLevel } from "../../types/MandateLevel";
+import { type MediaVariants, mediaVariants } from "../../types/Medias";
+import { type MandateLevel } from "../../types/MandateLevel";
 import EpIcon from "../basics/EpIcon.vue";
 import EpDivider from "../basics/EpDivider.vue";
 import EpChip from "../basics/EpChip.vue";
@@ -19,7 +19,10 @@ interface Props {
   type?: MediaVariants;
   intentions?: string;
   hideIcon?:boolean;
-  flat?:boolean
+  flat?:boolean;
+  labels?:{
+    intentions?:string; 
+  }
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -27,6 +30,11 @@ const props = withDefaults(defineProps<Props>(), {
   type: "base",
   hideIcon:false,
   flat:false,
+  labels:()=>{
+    return {
+        intentions:"[Intentions]"
+      }    
+    }
 });
 
 //get slots
@@ -76,16 +84,16 @@ const { title, hideIcon } = toRefs(props);
 
 <template>
   <div :class="containerStyle">
-    <div :class="`${topBarStyle}`" v-if="title || mandateLevel">
+    <div :class="`${topBarStyle}`" class="dark:bg-gray-300"  v-if="title || mandateLevel">
       <!-- <EpIcon :size="24" :icon-path="mdiBookOpenVariant"></EpIcon> -->
       <h3><EpIcon v-if="!hideIcon" :iconPath="renderIcon" size="24"></EpIcon> <span class="font-bold align-middle">{{ title }}</span></h3>
       <EpScope v-if="mandateLevel" :title="renderMandateLevel"></EpScope>
     </div>
-    <div class="px-5">
+    <div class="px-5 dark:bg-gray-300">
       <div class="py-2" v-if="hasIntentions">
         <!-- <EpIcon :size="24" :icon-path="mdiInformationOutline"></EpIcon> -->
         <h4 class="font-semibold mb-2 text-sm uppercase tracking-wide text-gray-500">
-          [Intentions]
+          {{labels.intentions}}
         </h4>
         <slot name="intentions"></slot>
         <EpDivider/>
@@ -94,9 +102,8 @@ const { title, hideIcon } = toRefs(props);
         <slot name="content"></slot>
       </div>
     </div>
-    <div :class="bottomBarStyle" v-if="hasActions">
-       <slot name="actions"></slot>
-       
-    </div>
+    <div :class="bottomBarStyle"  class="dark:bg-gray-300"  v-if="hasActions">
+      <slot name="actions"></slot>
+    </div> 
   </div>
 </template>

package/src/components/educationals/EpReading.vue

@@ -4,8 +4,8 @@ import EpIcon from "../basics/EpIcon.vue";
 import EpBtn from "../basics/EpBtn.vue";
 import DisplayBox from "../tools/DisplayBox.vue";
 import EpEdu from "./EpEdu.vue";
-import { MediaVariants } from "../../types/Medias";
-import { MandateLevel } from '../../types/MandateLevel';
+import { type MediaVariants } from "../../types/Medias";
+import { type MandateLevel } from '../../types/MandateLevel';
 import { useRenderText } from "../../composables/useRenderText";
 import { mdiBookmarkBox } from "@mdi/js";
 import { mdiBookOpenVariant } from "@mdi/js";
@@ -27,11 +27,19 @@ interface Props {
   more?: boolean;
   version_link?: null;
   hideCover?: boolean;
-  labelcard?: string;
-  labelBtb?: string;
-  labelIntentions?: string;
   type?:MediaVariants;
   hideIcon?:boolean;
+  labels?:{
+    par?:string;     
+    dans?:string;     
+    lire?:string;    
+    fermer?:string;   
+    details?:string;  
+    lecture?:string;  
+    card?: string;
+    Btb?: string;
+    Intentions?: string;
+  }
 }
 
 // type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
@@ -41,13 +49,23 @@ const props = withDefaults(defineProps<Props>(), {
   cover: "",
   icon: "mdiBookmarkBox",
   hideCover: false,
-  labelcard: "lecture",
-  labelBtb: "lire",
-  labelIntentions: "Intentions de lecture",
   intentions: "",
   compact: false,
   type:"base",
-  hideIcon:false
+  hideIcon:false,
+  labels:()=>{
+    return {
+      par:"par",
+      dans:"dans",
+      lire:"Lire",
+      fermer:"Fermer",
+      details:"détails",
+      lecture:"Lecture",
+      card: "lecture",
+      Btb: "lire",
+      intentions: "Intentions de lecture",
+    }
+  }
 });
 
 const old_image = "https://live.staticflickr.com/4868/45940268562_c5f7fdd06b_q.jpg";
@@ -72,7 +90,6 @@ const {
   intentions,
   cover,
   hideCover,
-  labelcard,
   year,
   author,
   container,
@@ -80,7 +97,8 @@ const {
   pages,
   type,
   mandateLevel,
-  url
+  url,
+  labels,
 } = toRefs(props);
 
 const errorImg = (event:Event)=>{
@@ -92,7 +110,7 @@ const errorImg = (event:Event)=>{
 </script>
 
 <template>
-  <div class="flex rounded-lg overflow-hidden bg-white md:flex-row" v-if="!compact">
+  <div class="flex rounded-lg overflow-hidden bg-white md:flex-row " v-if="!compact">
     <template v-if="!hideCover">
       <div
         v-if="hasCover"
@@ -103,13 +121,13 @@ const errorImg = (event:Event)=>{
 
       <div
         v-else
-        class="h-96 w-full rounded-t-lg md:h-auto md:w-56 md:rounded-none md:rounded-l-lg flex justify-center items-center text-gray-300"
+        class="h-96 w-full rounded-t-lg md:h-auto md:w-56 md:rounded-none md:rounded-l-lg flex justify-center items-center text-gray-300 dark:bg-gray- "
       >
         <EpIcon :icon-path="mdiBookOpenPageVariant" size="95"></EpIcon>
       </div>
     </template>
     <div class="flex flex-col w-full">
-      <EpEdu :title="labelcard" :icon="mdiBookOpenVariant" flat :type="type" :hideIcon="hideIcon" :mandateLevel="mandateLevel">
+      <EpEdu :title="labels.card" :icon="mdiBookOpenVariant" flat :type="type" :hideIcon="hideIcon" :mandateLevel="mandateLevel">
         <template #intentions v-if="useRenderText(intentions)">
           <div v-html="useRenderText(intentions)"></div>
         </template>
@@ -121,14 +139,14 @@ const errorImg = (event:Event)=>{
             <div class="flex">
               <div class="flex-1 py-2" v-if="hasDetails">
                 <p class="font-medium">
-                  <span class="text-sm italic pr-1" v-if="author">par</span>
+                  <span class="text-sm italic pr-1" v-if="author">{{labels.par}}</span>
                   <span class="font-bold mr-1" v-if="author">{{ author }}</span>
                   <span v-if="year">({{ year }})</span>
                   <span v-if="year && editor">, </span>
                   <span v-if="editor">{{ editor }}</span>
                 </p>
                 <p v-if="container">
-                  <span class="text-sm italic pr-1">dans</span>
+                  <span class="text-sm italic pr-1">{{labels.dans}}</span>
                   <span class="">{{ container }}</span>
                 </p>
               </div>
@@ -143,13 +161,13 @@ const errorImg = (event:Event)=>{
           </div>
         </template>
         <template #actions>
-          <EpBtn :color="type=='base'?'text-gray-700':'text-white'" :type="type" :href="url" v-if="url">LIRE</EpBtn>
+          <EpBtn :color="type=='base'?'text-gray-700':'text-white'" :type="type" :href="url" v-if="url">{{labels.lire}}</EpBtn>
         </template>
       </EpEdu>
     </div>
   </div>
   <!--compact mode-->
-  <EpEdu :title="labelcard" :icon="mdiBookOpenVariant" flat :type="type" :hideIcon="hideIcon" v-else>
+  <EpEdu :title="labels.card" :icon="mdiBookOpenVariant" flat :type="type" :hideIcon="hideIcon" v-else>
     <template #intentions v-if="useRenderText(intentions)">
       <div v-html="useRenderText(intentions)"></div>
     </template>
@@ -165,15 +183,15 @@ const errorImg = (event:Event)=>{
           <div class="p-5">
             <DisplayBox>
               <template #default="{ open }">
-                <EpBtn text @click.stop="open"> détails </EpBtn>
+                <EpBtn text @click.stop="open"> {{labels.details}} </EpBtn>
               </template>
               <template #menu="{ close }">
                 <div class="w-[32rem]">
-                  <div class="flex flex-col rounded-lg bg-white md:flex-row">
+                  <div class="flex flex-col rounded-lg bg-white md:flex-row ">
                     <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 object-cover md:h-auto md:w-56 md:rounded-none md:rounded-l-lg "
                         :src="cover"
                         :alt="`image de la lecture ${title}`"
                         @error="errorImg"
@@ -186,9 +204,9 @@ const errorImg = (event:Event)=>{
                       </div>
                     </template>
                     <div class="flex flex-col justify-between w-full">
-                      <div class="bg-neutral-100 text-left px-5 py-2">
+                      <div class="bg-neutral-100 text-left px-5 py-2 dark:bg-neutral-300 ">
                         <EpIcon :size="24" :icon-path="mdiBookOpenVariant"></EpIcon>
-                        <span class="pl-2 align-middle">Lecture</span>
+                        <span class="pl-2 align-middle">{{labels.lecture}}</span>
                       </div>
                       <div class="w-full px-5">
                         <h4
@@ -201,14 +219,14 @@ const errorImg = (event:Event)=>{
                         <div class="flex">
                           <div class="flex-1 py-2" v-if="hasDetails">
                             <p class="font-medium">
-                              <span class="text-sm italic pr-1" v-if="author">par</span>
+                              <span class="text-sm italic pr-1" v-if="author">{{labels.par}}</span>
                               <span class="font-bold mr-2" v-if="author">{{ author }}</span>
                               <span v-if="year"> ({{ year }})</span>
                               <span v-if="year && editor">, </span>
                               <span v-if="editor">{{ editor }}</span>
                             </p>
                             <p v-if="container">
-                              <span class="text-sm italic pr-1">dans</span>
+                              <span class="text-sm italic pr-1">{{labels.dans}}</span>
                               <span>{{ container }}</span>
                             </p>
                           </div>
@@ -224,7 +242,7 @@ const errorImg = (event:Event)=>{
                         </div>
                       </div>
                       <div class="bg-neutral-100 text-right pr-5">
-                        <EpBtn text @click.stop="close"> Fermer </EpBtn>
+                        <EpBtn text @click.stop="close"> {{labels.fermer}} </EpBtn>
                       </div>
                     </div>
                   </div>
@@ -235,7 +253,7 @@ const errorImg = (event:Event)=>{
 
           <div class="border-l p-5">
             <EpBtn text :href="url" v-if="url">
-              <EpIcon :size="20" :icon-path="mdiOpenInNew"></EpIcon> Lire
+              <EpIcon :size="20" :icon-path="mdiOpenInNew"></EpIcon> {{labels.lire}}
             </EpBtn>
           </div>
         </div>

package/src/components/educationals/EpResource.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { defineAsyncComponent, computed, toRefs } from 'vue';
-import { MandateLevel } from '../../types/MandateLevel';
+import { type MandateLevel } from '../../types/MandateLevel';
 import { useComponent } from '../../composables/useComponent';
-import { MediaVariants } from "../../types/Medias";
+import { type MediaVariants } from "../../types/Medias";
 interface Props {
    pages?:string;
    resource:any;

package/src/components/educationals/EpScope.vue

@@ -2,7 +2,7 @@
 import { ref, toRefs, computed } from "vue";
 //types with capital letter, object styles in lowercase
 import EpChip from "../basics/EpChip.vue";
-import { ChipBgVariant } from "../../types/Chip";
+import { type ChipBgVariant } from "../../types/Chip";
 
 interface Props {
   title?: string;

package/src/components/forms/EpRadio.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { toRefs, computed } from "vue";
-import { RadioVariants, radioVariants } from "../../types/Radio";
+import { type RadioVariants, radioVariants } from "../../types/Radio";
 
 interface Props {
   id?: string;

package/src/components/forms/EpRadioSummative.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { toRefs, computed } from "vue";
-import { RadioVariants, radioVariants } from "../../types/Radio";
+import { type RadioVariants, radioVariants } from "../../types/Radio";
 
 interface Props {
     id?: string;

package/src/components/forms/EpSelect.vue

@@ -22,6 +22,14 @@ interface Props {
   iconSize?: string;
   disabled?: boolean;
   readonly?: boolean;
+  labels?:{
+    option?:string;      
+    vanderpoel?:string; 
+    vanaert?:string;    
+    pogacar?:string;    
+    evenepoel?:string;  
+    meilleur?:string;   
+  }
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -33,6 +41,16 @@ const props = withDefaults(defineProps<Props>(), {
   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"
+    }
+  }
 });
 
 
@@ -72,11 +90,11 @@ const props = withDefaults(defineProps<Props>(), {
   disabled:bg-neutral-200
   focus:ring-0
   ">
-    <option value="option">Choisissez une option</option>
-    <option value="vanderpoel">Van Der Poel</option>
-    <option value="vanaert">Van Aert</option>
-    <option value="pogacar">Pogacar</option>
-    <option value="evenepoel">Evenepoel</option>
+    <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[' '] 
@@ -138,7 +156,7 @@ const props = withDefaults(defineProps<Props>(), {
   peer-disabled:after:border-transparent 
   peer-disabled:peer-placeholder-shown:text-blue-gray-500
   ">
-    Quel est le meilleur cycliste
+    {{labels.meilleur}}
   </label>
   <EpBadge :iconPath="mdiLockOutline" />
 </div>

package/src/components/forms/EpSwitch.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { toRefs,computed } from "vue";
 import { defineEmits } from 'vue'
-import { SwitchColorVariant , ColorVariants} from "../../types/Switch";
+import { type SwitchColorVariant, ColorVariants} from "../../types/Switch";
 
 interface Props {
   id?: string;

package/src/components/forms/EpTextarea.vue

@@ -24,6 +24,9 @@ interface Props {
     iconSize?: string;
     disabled?: boolean;
     readonly?: boolean;
+    labels?:{
+        message?:string; 
+    }
 }
 
 // text: mdiText
@@ -46,6 +49,11 @@ const props = withDefaults(defineProps<Props>(), {
     iconSize: "",
     disabled: false,
     readonly: false,
+    labels:()=>{
+        return {
+            message:"Message"
+        }       
+    }
 });
 
 const emit = defineEmits<{
@@ -72,7 +80,7 @@ const {
                 placeholder=" "></textarea>
             <label
                 class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-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-neutral-300 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-neutral-300 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-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-500">
-                Message
+                {{labels.message}}
             </label>
         </div>
     </div>

package/src/components/forms/EpToggle.vue

@@ -10,6 +10,9 @@ interface Props {
   disabled?: boolean;
   readonly?: boolean;
   checked?: boolean;
+  labels?:{
+    defaultSwitch?:string; //Default switch checkbox input
+  }
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -21,6 +24,11 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   readonly: false,
   checked: false,
+  labels:()=>{
+    return {
+      defaultSwitch:"Default switch checkbox input"
+    }
+  }
 });
 
 const emit = defineEmits<{
@@ -83,6 +91,6 @@ const {
 	  
 	  dark:bg-neutral-600 dark:after:bg-neutral-400 dark:checked:bg-blue-600 dark:checked:after:bg-blue-600 dark:focus:before:shadow-[3px_-1px_0px_13px_rgba(255,255,255,0.4)] dark:checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca] disabled:opacity-40 disabled:cursor-not-allowed"
       role="switch" :disabled="disabled" />
-    <label class="inline-block pl-[0.15rem] hover:cursor-pointer" :for="id">Default switch checkbox input</label>
+    <label class="inline-block pl-[0.15rem] hover:cursor-pointer" :for="id">{{labels.defaultSwitch}}</label>
   </div>
 </template>