ep-lib-ts 1.0.6 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (122) hide show
  1. package/dist/BgAudio-97_FwNpi.js +4 -0
  2. package/dist/DisplayBox-BKvyxVDI.js +4 -0
  3. package/dist/EpAlert-B0J2GajN.js +4 -0
  4. package/dist/EpAudio-D4LqGrlY.js +4 -0
  5. package/dist/EpBadge-D0zfflkO.js +4 -0
  6. package/dist/EpBarChart-Goi23S1c.js +4 -0
  7. package/dist/EpBtn-6OyInoYb.js +4 -0
  8. package/dist/EpCard-B5bDGeEK.js +4 -0
  9. package/dist/EpChip-BSCyoekb.js +4 -0
  10. package/dist/{EpCodeblock-DX7H-PE3.js → EpCodeblock-C4BqtKtL.js} +2 -2
  11. package/dist/EpContentSlider-Bqs98eaf.js +4 -0
  12. package/dist/EpDarkmode-BYMjBRp5.js +26 -0
  13. package/dist/EpDivider-DIhicI-t.js +4 -0
  14. package/dist/EpEdu-Ck-nZ2kC.js +4 -0
  15. package/dist/EpFlex-c8FzEIAx.js +4 -0
  16. package/dist/EpFunnelChart-Co_n-21j.js +4 -0
  17. package/dist/EpHeader-DDhDKNct.js +4 -0
  18. package/dist/{EpHover-kZgJ2f1P.js → EpHover-BOo9CvO_.js} +1 -1
  19. package/dist/EpIcon-Dc_coPXn.js +4 -0
  20. package/dist/EpIframe-CmY_3U0n.js +4 -0
  21. package/dist/EpImg-DXYSCqDH.js +4 -0
  22. package/dist/{EpInput-BEcNn9JQ.js → EpInput-BfzuHWWf.js} +2 -3
  23. package/dist/EpLineChart-DRJspXp0.js +4 -0
  24. package/dist/EpLink-_uT9EmuD.js +4 -0
  25. package/dist/EpLinkVersion-BdrI-TIu.js +4 -0
  26. package/dist/{EpList-VmeDfvpc.js → EpList-DpKFBR8d.js} +1 -1
  27. package/dist/EpModal-D1L3wzLd.js +4 -0
  28. package/dist/{EpNothing-DG4uHrcR.js → EpNothing-ZOBK_3UX.js} +1 -1
  29. package/dist/EpPieChart-CfDjCzZI.js +4 -0
  30. package/dist/EpQuestion-mIk4I_2l.js +4 -0
  31. package/dist/EpQuote-ByCm1IPJ.js +4 -0
  32. package/dist/EpRadio-UmkupYaI.js +4 -0
  33. package/dist/EpRadioSummative-7f-9bm5C.js +4 -0
  34. package/dist/EpReading-Cj1zVokc.js +4 -0
  35. package/dist/EpResource-ubt3wYLi.js +4 -0
  36. package/dist/EpScope-DKAZvK2F.js +4 -0
  37. package/dist/EpSection-CAktzXw1.js +4 -0
  38. package/dist/{EpSelect-Cm8AVg72.js → EpSelect-bYMPzTYw.js} +1 -1
  39. package/dist/EpSkeleton-D612NKyo.js +4 -0
  40. package/dist/EpSoftware-DpbyhGDO.js +4 -0
  41. package/dist/EpSpinner-BSoHQmsn.js +4 -0
  42. package/dist/EpSummativeTable-cJ_kI33E.js +4 -0
  43. package/dist/EpSvg-DqncJTFg.js +4 -0
  44. package/dist/EpTable-CAgdQTKw.js +4 -0
  45. package/dist/EpTerm-BvelpDRy.js +4 -0
  46. package/dist/EpText-BjukLSSv.js +4 -0
  47. package/dist/EpTimeLine-Do1j0PKU.js +4 -0
  48. package/dist/EpVideo-CsMQzGnu.js +4 -0
  49. package/dist/EpVideoPanopto-D5u4ObkY.js +4 -0
  50. package/dist/EpWordDef-BFjyQ0Vn.js +4 -0
  51. package/dist/components/basics/EpImg.vue.d.ts +4 -0
  52. package/dist/ep-lib-ts.js +11 -11
  53. package/dist/ep-lib-ts.umd.cjs +51 -51
  54. package/dist/{index-DNwUz3uD.js → index-BIMaadN6.js} +204 -407
  55. package/dist/{index-CWNyTRsL.js → index-CCDb-LD7.js} +4529 -4236
  56. package/dist/index.d.ts +1 -42
  57. package/dist/{prism-DENTMpmV.js → prism-Bh7wZVTO.js} +1 -1
  58. package/dist/style.css +1 -1
  59. package/package.json +2 -2
  60. package/src/components/basics/EpCard.vue +1 -1
  61. package/src/components/basics/EpImg.vue +177 -119
  62. package/src/components/basics/EpTable.vue +3 -3
  63. package/src/components/charts/EpBarChart.vue +24 -16
  64. package/src/components/charts/EpFunnelChart.vue +98 -91
  65. package/src/components/charts/EpLineChart.vue +18 -13
  66. package/src/components/charts/EpPieChart.vue +17 -2
  67. package/src/components/educationals/EpEdu.vue +2 -2
  68. package/src/components/educationals/EpReading.vue +7 -7
  69. package/src/components/interactions/EpAccordeon.vue +1 -1
  70. package/src/components/interactions/EpContentSlider.vue +4 -4
  71. package/src/components/interactions/EpDarkmode.vue +6 -3
  72. package/src/components/interactions/EpSummativeTable.vue +2 -2
  73. package/src/components/medias/EpCarousel.vue +2 -2
  74. package/src/components/medias/EpLink.vue +1 -2
  75. package/src/components/medias/EpSoftware.vue +2 -2
  76. package/src/components/medias/EpWordDef.vue +6 -6
  77. package/src/components/signages/EpHeader.vue +2 -2
  78. package/src/components/signages/EpQuote.vue +2 -2
  79. package/dist/BgAudio-D0bYt2vk.js +0 -4
  80. package/dist/DisplayBox-B_BDtSRL.js +0 -4
  81. package/dist/EpAlert-DLdxfnbh.js +0 -4
  82. package/dist/EpAudio-CIh7P96j.js +0 -4
  83. package/dist/EpBadge-RSrPtork.js +0 -4
  84. package/dist/EpBarChart-BYviso9y.js +0 -4
  85. package/dist/EpBtn-CI08Fkc-.js +0 -4
  86. package/dist/EpCard-BmYWCNC6.js +0 -4
  87. package/dist/EpChip-DYxrBk_j.js +0 -4
  88. package/dist/EpContentSlider-3W5NRtqY.js +0 -4
  89. package/dist/EpDarkmode-CVX7I7Oh.js +0 -22
  90. package/dist/EpDivider-C8eu7oo-.js +0 -4
  91. package/dist/EpEdu-D3s7wgId.js +0 -4
  92. package/dist/EpFlex-D3slIMIF.js +0 -4
  93. package/dist/EpFunnelChart-Bd6DcHXv.js +0 -4
  94. package/dist/EpHeader-LmfheLve.js +0 -4
  95. package/dist/EpIcon-CTPp2iAz.js +0 -4
  96. package/dist/EpIframe-Bu6Shp40.js +0 -4
  97. package/dist/EpImg-PgXn_5PG.js +0 -4
  98. package/dist/EpLineChart-CuvzboxC.js +0 -4
  99. package/dist/EpLink-t90xMdUk.js +0 -4
  100. package/dist/EpLinkVersion-DcLaAKcb.js +0 -4
  101. package/dist/EpModal-DTKzIbiU.js +0 -4
  102. package/dist/EpPieChart-CDbVXeA9.js +0 -4
  103. package/dist/EpQuestion-zXilF4UO.js +0 -4
  104. package/dist/EpQuote-BRWz5Gax.js +0 -4
  105. package/dist/EpRadio-C4i-6XLB.js +0 -4
  106. package/dist/EpRadioSummative-DcZ_SSed.js +0 -4
  107. package/dist/EpReading-CE2gINrm.js +0 -4
  108. package/dist/EpResource-Co7Y4NBv.js +0 -4
  109. package/dist/EpScope-BgReTGM3.js +0 -4
  110. package/dist/EpSection-DAc7gApp.js +0 -4
  111. package/dist/EpSkeleton-DTrfxnMN.js +0 -4
  112. package/dist/EpSoftware-BRheqKDl.js +0 -4
  113. package/dist/EpSpinner-Bs6k4L2I.js +0 -4
  114. package/dist/EpSummativeTable-R-a__jzb.js +0 -4
  115. package/dist/EpSvg-8H1LG5x_.js +0 -4
  116. package/dist/EpTable-CcPpxyTI.js +0 -4
  117. package/dist/EpTerm-CHal6ICj.js +0 -4
  118. package/dist/EpText-Div60TMB.js +0 -4
  119. package/dist/EpTimeLine-CcUqFqgj.js +0 -4
  120. package/dist/EpVideo-Bk2ovJyj.js +0 -4
  121. package/dist/EpVideoPanopto-gQgwEvaf.js +0 -4
  122. package/dist/EpWordDef-D81-AGFK.js +0 -4
@@ -5,101 +5,110 @@ import { mdiTriangle } from '@mdi/js';
5
5
  import { type MediaVariants } from "../../types/Medias";
6
6
  import { isHtml } from "../../composables/isHtml";
7
7
  import { useMarkdown } from "../../composables/useMarkdown";
8
-
9
- interface OptionsFormmater{
10
- dataPointIndex:number;
11
- w:{globals:{
12
- labels:string[]
13
- }}
8
+ import { useColorMode } from '@vueuse/core'
9
+ interface OptionsFormmater {
10
+ dataPointIndex: number;
11
+ w: {
12
+ globals: {
13
+ labels: string[]
14
+ }
15
+ }
14
16
  }
15
17
 
16
18
  interface seriesFunnel {
17
- name: string,
18
- data: number[]
19
+ name: string,
20
+ data: number[]
19
21
  }
20
22
 
21
23
  interface Props {
22
- series: seriesFunnel[];
23
- labels: string[];
24
- //options: OptionsFunnelChart;
25
- id?: string;
26
- title?:string;
27
- center?: boolean;
28
- intentions?: string;
29
- hideIcon?: boolean;
30
- type?: MediaVariants;
31
- mandateLevel?: string | null;
32
- source?: string;
33
- width?: string;
34
- height?: number;
35
- isFunnel?:boolean;
36
- colors?:string[];
24
+ series: seriesFunnel[];
25
+ labels: string[];
26
+ //options: OptionsFunnelChart;
27
+ id?: string;
28
+ title?: string;
29
+ center?: boolean;
30
+ intentions?: string;
31
+ hideIcon?: boolean;
32
+ type?: MediaVariants;
33
+ mandateLevel?: string | null;
34
+ source?: string;
35
+ width?: string;
36
+ height?: number;
37
+ isFunnel?: boolean;
38
+ colors?: string[];
37
39
  }
38
40
 
39
41
  const props = withDefaults(defineProps<Props>(), {
40
- center: true,
41
- type: 'base',
42
- width: "800",
43
- height: 350,
44
- isFunnel:true,
45
- colors:()=>[
46
- '#283243',
47
- '#3b4f6d',
48
- '#465e87',
49
- '#5072a5',
50
- '#648bb9',
51
- '#6e9ac3',
52
- '#8ab3d0',
53
- '#b0cee0',]
42
+ center: true,
43
+ type: 'base',
44
+ width: "800",
45
+ height: 350,
46
+ isFunnel: true,
47
+ colors: () => [
48
+ '#283243',
49
+ '#3b4f6d',
50
+ '#465e87',
51
+ '#5072a5',
52
+ '#648bb9',
53
+ '#6e9ac3',
54
+ '#8ab3d0',
55
+ '#b0cee0',]
54
56
  });
55
57
 
56
58
 
57
59
  const renderText = computed(() => {
58
- if (!props.intentions) {
59
- return null;
60
- }
61
- if (!isHtml(props.intentions)) {
62
- return useMarkdown(props.intentions);
63
- }
64
- return props.intentions;
60
+ if (!props.intentions) {
61
+ return null;
62
+ }
63
+ if (!isHtml(props.intentions)) {
64
+ return useMarkdown(props.intentions);
65
+ }
66
+ return props.intentions;
65
67
  });
66
68
 
67
- const optionsFunnel = computed(()=> {
68
- return {
69
- chart: {
70
- type: 'bar',
71
- height: props.height,
69
+ const mode = useColorMode()
70
+
71
+
72
+ const optionsFunnel = computed(() => {
73
+ return {
74
+ chart: {
75
+ type: 'bar',
76
+ background: 'transparent',
77
+ height: props.height,
78
+ },
79
+ plotOptions: {
80
+ bar: {
81
+ borderRadius: 0,
82
+ horizontal: true,
83
+ distributed: true,
84
+ barHeight: '80%',
85
+ isFunnel: props.isFunnel,
72
86
  },
73
- plotOptions: {
74
- bar: {
75
- borderRadius: 0,
76
- horizontal: true,
77
- distributed: true,
78
- barHeight: '80%',
79
- isFunnel: props.isFunnel,
80
- },
87
+ },
88
+ theme: {
89
+ mode: mode.value
90
+ },
91
+ colors: props.colors,
92
+ dataLabels: {
93
+ enabled: true,
94
+ formatter: function (val: string, opt: OptionsFormmater) {
95
+ let label = ''
96
+ if (opt.w.globals.labels[opt.dataPointIndex]) {
97
+ label = opt.w.globals.labels[opt.dataPointIndex] + ' '
98
+ }
99
+ return label + val
81
100
  },
82
- colors: props.colors,
83
- dataLabels: {
101
+ dropShadow: {
84
102
  enabled: true,
85
- formatter: function (val:string, opt:OptionsFormmater) {
86
- let label = ''
87
- if(opt.w.globals.labels[opt.dataPointIndex]){
88
- label = opt.w.globals.labels[opt.dataPointIndex] + ' '
89
- }
90
- return label + val
91
- },
92
- dropShadow: {
93
- enabled: true,
94
- },
95
- },
96
- xaxis: {
97
- categories: props.labels
98
103
  },
99
- legend: {
100
- show: false,
101
- },
102
- }
104
+ },
105
+ xaxis: {
106
+ categories: props.labels
107
+ },
108
+ legend: {
109
+ show: false,
110
+ },
111
+ }
103
112
  })
104
113
 
105
114
 
@@ -110,20 +119,18 @@ const { center, series, source, labels, width } = toRefs(props)
110
119
 
111
120
  <template>
112
121
 
113
- <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiTriangle"
114
- :mandateLevel="mandateLevel">
115
- <template #intentions v-if="renderText">
122
+ <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiTriangle" :mandateLevel="mandateLevel">
123
+ <template #intentions v-if="renderText">
116
124
 
117
- <div v-html="renderText"></div>
118
- </template>
119
- <template #content>
120
- <div :class="`p-4 ${center ? 'flex justify-center' : ''}`" v-if="labels && series">
121
- <apexchart type="bar" :width="width" :height="height" :options="optionsFunnel"
122
- :series="series"></apexchart>
123
- </div>
124
- </template>
125
- <template #actions v-if="source">
126
- <p>{{ source }}</p>
127
- </template>
128
- </EpEdu>
125
+ <div v-html="renderText"></div>
126
+ </template>
127
+ <template #content>
128
+ <div :class="`p-4 ${center ? 'flex justify-center' : ''}`" v-if="labels && series">
129
+ <apexchart type="bar" :width="width" :height="height" :options="optionsFunnel" :series="series"></apexchart>
130
+ </div>
131
+ </template>
132
+ <template #actions v-if="source">
133
+ <p>{{ source }}</p>
134
+ </template>
135
+ </EpEdu>
129
136
  </template>
@@ -5,6 +5,7 @@ import { mdiChartLine } from "@mdi/js";
5
5
  import { type MediaVariants } from "../../types/Medias";
6
6
  import { isHtml } from "../../composables/isHtml";
7
7
  import { useMarkdown } from "../../composables/useMarkdown";
8
+ import { useColorMode } from '@vueuse/core'
8
9
 
9
10
  interface Serie {
10
11
  name: string;
@@ -16,7 +17,7 @@ interface Options {
16
17
  categories: (number | string)[];
17
18
  convertedCatToNumeric?: boolean;
18
19
  },
19
- colors?:string[]
20
+ colors?: string[]
20
21
  }
21
22
 
22
23
  interface Props {
@@ -30,20 +31,20 @@ interface Props {
30
31
  type?: MediaVariants;
31
32
  mandateLevel?: string | null;
32
33
  source?: string;
33
- width?:string;
34
- labels?:{
35
- dataNoDisponible?:string;
34
+ width?: string;
35
+ labels?: {
36
+ dataNoDisponible?: string;
36
37
  }
37
38
  }
38
39
 
39
40
  const props = withDefaults(defineProps<Props>(), {
40
41
  center: true,
41
- width:"500",
42
- labels:()=>{
42
+ width: "500",
43
+ labels: () => {
43
44
  return {
44
- dataNoDisponible:"Data no disponible"
45
- }
45
+ dataNoDisponible: "Data no disponible"
46
46
  }
47
+ }
47
48
  });
48
49
 
49
50
  const renderText = computed(() => {
@@ -56,9 +57,15 @@ const renderText = computed(() => {
56
57
  return props.intentions;
57
58
  });
58
59
 
60
+
61
+ const mode = useColorMode()
62
+
59
63
  const globalOptions = computed(() => {
60
64
  return {
61
65
  ...props.options,
66
+ theme: {
67
+ mode: mode.value
68
+ },
62
69
  dataLabels: {
63
70
  enabled: false
64
71
  },
@@ -66,7 +73,7 @@ const globalOptions = computed(() => {
66
73
  curve: "straight"
67
74
  },
68
75
  chart: {
69
- width: 550,
76
+ background: 'transparent',
70
77
  type: "line",
71
78
  zoom: {
72
79
  enabled: false,
@@ -75,7 +82,7 @@ const globalOptions = computed(() => {
75
82
  }
76
83
  })
77
84
 
78
- const { center, series, source, width} = toRefs(props)
85
+ const { center, series, source, width } = toRefs(props)
79
86
 
80
87
  </script>
81
88
 
@@ -89,7 +96,7 @@ const { center, series, source, width} = toRefs(props)
89
96
  <apexchart :width="width" type="line" :options="globalOptions" :series="series"></apexchart>
90
97
  </div>
91
98
  <div v-else>
92
- <p>{{labels.dataNoDisponible}}</p>
99
+ <p>{{ labels.dataNoDisponible }}</p>
93
100
  </div>
94
101
  </template>
95
102
  <template #actions v-if="source">
@@ -97,5 +104,3 @@ const { center, series, source, width} = toRefs(props)
97
104
  </template>
98
105
  </EpEdu>
99
106
  </template>
100
-
101
-
@@ -5,6 +5,7 @@ import { mdiChartPie } from '@mdi/js';
5
5
  import { type MediaVariants } from "../../types/Medias";
6
6
  import { isHtml } from "../../composables/isHtml";
7
7
  import { useMarkdown } from "../../composables/useMarkdown";
8
+ import { useColorMode } from '@vueuse/core'
8
9
 
9
10
  interface TitlePie {
10
11
  text: string;
@@ -62,9 +63,23 @@ const renderText = computed(() => {
62
63
  return props.intentions;
63
64
  });
64
65
 
66
+ const mode = useColorMode()
67
+
68
+ const globalOptions = computed(() => {
69
+ return {
70
+ ...props.options,
71
+ theme: {
72
+ mode: mode.value
73
+ },
74
+ chart: {
75
+ background: 'transparent'
76
+ },
77
+ }
78
+ })
79
+
65
80
 
66
81
 
67
- const { center, series, source, options, width } = toRefs(props)
82
+ const { center, series, source, width } = toRefs(props)
68
83
 
69
84
  </script>
70
85
 
@@ -77,7 +92,7 @@ const { center, series, source, options, width } = toRefs(props)
77
92
  </template>
78
93
  <template #content>
79
94
  <div :class="`p-4 ${center ? 'flex justify-center' : ''}`" v-if="options && series">
80
- <apexchart :width="width" type="pie" :options="options" :series="series"></apexchart>
95
+ <apexchart :width="width" type="pie" :options="globalOptions" :series="series"></apexchart>
81
96
  </div>
82
97
  <div v-else>
83
98
  <p>{{labels.dataNoDisponible}}</p>
@@ -89,10 +89,10 @@ const { title, hideIcon } = toRefs(props);
89
89
  <h3><EpIcon v-if="!hideIcon" :iconPath="renderIcon" size="24"></EpIcon> <span class="font-bold align-middle">{{ title }}</span></h3>
90
90
  <EpScope v-if="mandateLevel" :title="renderMandateLevel"></EpScope>
91
91
  </div>
92
- <div class="px-5 dark:base-dark">
92
+ <div class="px-5 dark:base-dark dark:text-white">
93
93
  <div class="py-2" v-if="hasIntentions">
94
94
  <!-- <EpIcon :size="24" :icon-path="mdiInformationOutline"></EpIcon> -->
95
- <h4 class="font-semibold mb-2 text-sm uppercase tracking-wide text-gray-500">
95
+ <h4 class="font-semibold mb-2 text-sm uppercase tracking-wide text-gray-500 dark:text-white">
96
96
  {{labels.intentions}}
97
97
  </h4>
98
98
  <slot name="intentions"></slot>
@@ -110,7 +110,7 @@ const errorImg = (event:Event)=>{
110
110
  </script>
111
111
 
112
112
  <template>
113
- <div class="flex rounded-lg overflow-hidden bg-white md:flex-row " v-if="!compact">
113
+ <div class="flex rounded-lg overflow-hidden bg-white dark:bg-dark md:flex-row " v-if="!compact">
114
114
  <template v-if="!hideCover">
115
115
  <div
116
116
  v-if="hasCover"
@@ -121,7 +121,7 @@ const errorImg = (event:Event)=>{
121
121
 
122
122
  <div
123
123
  v-else
124
- 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- "
124
+ 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-dark "
125
125
  >
126
126
  <EpIcon :icon-path="mdiBookOpenPageVariant" size="95"></EpIcon>
127
127
  </div>
@@ -161,7 +161,7 @@ const errorImg = (event:Event)=>{
161
161
  </div>
162
162
  </template>
163
163
  <template #actions>
164
- <EpBtn :color="type=='base'?'text-gray-700':'text-white'" :type="type" :href="url" v-if="url">{{labels.lire}}</EpBtn>
164
+ <EpBtn :color="type=='base'?'text-gray-700':'text-white dark:text-black'" :type="type" :href="url" v-if="url">{{labels.lire}}</EpBtn>
165
165
  </template>
166
166
  </EpEdu>
167
167
  </div>
@@ -175,7 +175,7 @@ const errorImg = (event:Event)=>{
175
175
  <div class="flex flex-row justify-between">
176
176
  <div class="p-5">
177
177
  <span
178
- class="text-lg leading-6 font-semibold font-sans text-skin-inverted group-hover:text-skin-primary"
178
+ class="text-lg leading-6 font-semibold font-sans"
179
179
  >{{ title }}</span
180
180
  >
181
181
  </div>
@@ -187,7 +187,7 @@ const errorImg = (event:Event)=>{
187
187
  </template>
188
188
  <template #menu="{ close }">
189
189
  <div class="w-[32rem]">
190
- <div class="flex flex-col rounded-lg bg-white md:flex-row ">
190
+ <div class="flex flex-col rounded-lg bg-white dark:bg-dark dark:border-r md:flex-row ">
191
191
  <template v-if="!hideCover">
192
192
  <img
193
193
  v-if="hasCover"
@@ -204,7 +204,7 @@ const errorImg = (event:Event)=>{
204
204
  </div>
205
205
  </template>
206
206
  <div class="flex flex-col justify-between w-full">
207
- <div class="bg-neutral-100 text-left px-5 py-2 dark:bg-neutral-300 ">
207
+ <div class="text-left px-5 py-2 bg-gray-100 text-black dark:rounded-tr-lg">
208
208
  <EpIcon :size="24" :icon-path="mdiBookOpenVariant"></EpIcon>
209
209
  <span class="pl-2 align-middle">{{labels.lecture}}</span>
210
210
  </div>
@@ -241,7 +241,7 @@ const errorImg = (event:Event)=>{
241
241
  </div>
242
242
  </div>
243
243
  </div>
244
- <div class="bg-neutral-100 text-right pr-5">
244
+ <div class="bg-gray-100 dark:bg-transparent dark:border-b dark:rounded-br text-right pr-5">
245
245
  <EpBtn text @click.stop="close"> {{labels.fermer}} </EpBtn>
246
246
  </div>
247
247
  </div>
@@ -35,7 +35,7 @@ const stylesHeader = computed(()=>{
35
35
  })
36
36
 
37
37
  const contentStyles = computed(()=>{
38
- return `px-4 ${useColors('bg', props.type + 'light')} dark:${useColors('bg', props.type + 'dark')}`
38
+ return `px-4 ${useColors('bg', props.type + 'light')} dark:bg-dark dark:${useColors('border', props.type + 'dark')}`
39
39
  })
40
40
 
41
41
  onMounted(() => {
@@ -76,15 +76,15 @@ const { slides } = toRefs(props)
76
76
  </script>
77
77
 
78
78
  <template>
79
- <div class="bg-stone-100 p-5 w-full md:h-custom overflow-hidden dark:bg-stone-300">
80
- <div class="flex justify-between border-b border-black w-auto">
81
- <h5 class="text-lg border-b-4 border-black">
79
+ <div class="bg-stone-100 dark:bg-dark p-5 w-full md:h-custom overflow-hidden dark:border dark:border-base">
80
+ <div class="flex justify-between border-b border-black dark:border-white w-auto">
81
+ <h5 class="text-lg border-b-4 border-black dark:border-white">
82
82
  {{ currentSlide.title }}
83
83
  </h5>
84
84
  <div class="md:flex items-end pb-1" v-if="slides">
85
85
  <template v-for="(slide, i) in slides.length" :key="`slide-index-${i}`">
86
86
  <span
87
- :class="`cursor-pointer h-4 w-4 ml-1 inline-block ${i === currentIndex ? 'bg-primary' : 'bg-gray-400'}`"
87
+ :class="`cursor-pointer h-4 w-4 ml-1 inline-block ${i === currentIndex ? 'bg-primary' : 'bg-base-dark dark:bg-base-light'}`"
88
88
  @click="goTo(i)"></span>
89
89
  </template>
90
90
  <span class="ml-2 text-xs">({{ (currentIndex + 1) }}/{{ slides.length }})</span>
@@ -1,8 +1,8 @@
1
1
  <script setup lang="ts">
2
2
  import { ref, onMounted } from 'vue';
3
-
3
+ import { useColorMode } from '@vueuse/core'
4
4
  type UserTheme = 'light' | 'dark';
5
-
5
+ const mode = useColorMode()
6
6
  const emit = defineEmits<{
7
7
  (e: "update:userMode", userMode:UserTheme): void;
8
8
  }>();
@@ -10,12 +10,15 @@
10
10
 
11
11
  const setTheme = (theme: UserTheme) => {
12
12
  localStorage.setItem('user-theme', theme);
13
+ mode.value = theme
13
14
  userTheme.value = theme;
14
15
  document.documentElement.className = theme;
15
16
  };
16
17
 
17
18
  const getTheme = (): UserTheme => {
18
- return localStorage.getItem('user-theme') as UserTheme;
19
+ const localValue = localStorage.getItem('user-theme') as UserTheme;
20
+ mode.value = localValue
21
+ return localValue
19
22
  };
20
23
 
21
24
  const toggleTheme = (): void => {
@@ -32,10 +32,10 @@ const transformNumber = (value:string|number) => {
32
32
  </script>
33
33
 
34
34
  <template>
35
- <div class="mt-4 bg-gray-50 p-4 dark:bg-gray-300">
35
+ <div class="mt-4 bg-base-light p-4 dark:bg-dark dark:border-y-2">
36
36
  <h4 v-if="title" class="text-xl font-semibold mb-6">{{ title }}</h4>
37
37
  <template v-for="(question,i) in questions" :key="`item-question-${i}`">
38
- <p class=" text-gray-600 py-2 rounded">{{question.label}}</p>
38
+ <p class="text-base-dark dark:text-base-light py-2 rounded">{{question.label}}</p>
39
39
  <div class="flex flex-row flex-wrap gap-y-2 sm:gap-x-4">
40
40
  <template v-for="(_option, j) in question.options" :key="`option-question-${j}`">
41
41
  <EpRadioSummative
@@ -53,7 +53,7 @@ const { carrouselImg, labelClose, labelRef, sizeThumbnail } = toRefs(props);
53
53
  <EpIcon :icon-path="mdiChevronRightCircleOutline"></EpIcon>
54
54
  </button>
55
55
  </div>
56
- <div class="bg-white shadow-xl p-4 lg:max-w-[800px] mx-auto border-solid">
56
+ <div class="bg-white dark:bg-dark shadow-xl p-4 lg:max-w-[800px] mx-auto border-solid border">
57
57
  <!-- <div class="max-w-[800px] h-[550px] m-auto relative">
58
58
  <div
59
59
  class="w-full h-full bg-center duration-500"
@@ -63,7 +63,7 @@ const { carrouselImg, labelClose, labelRef, sizeThumbnail } = toRefs(props);
63
63
 
64
64
  <img :src="carrouselImg[currentIndex].src" alt="image" class="rounded-sm" />
65
65
 
66
- <div v-if="carrouselImg[currentIndex]?.caption" class="mt-2 text-sm text-gray-800">
66
+ <div v-if="carrouselImg[currentIndex]?.caption" class="mt-2 text-sm text-base-dark dark:text-white">
67
67
  {{ carrouselImg[currentIndex].caption }}
68
68
  </div>
69
69
  <div v-if="carrouselImg[currentIndex]?.bib" class="flex justify-end mt-2">
@@ -38,7 +38,7 @@ const renderIcon = computed(() => {
38
38
  const hoverColor = computed(() => {
39
39
  return `absolute ${useColors(
40
40
  "bg",
41
- props.type + "light"
41
+ props.type + "dark"
42
42
  )} bottom-0 w-0 left-1/2 h-full -translate-x-1/2 transition-all ease-in-out duration-300 group-hover:w-[105%] -z-[1] group-focus:w-[105%]`;
43
43
  });
44
44
 
@@ -62,7 +62,6 @@ const { url, title, intentions, mandateLevel, hideIcon } = toRefs(props);
62
62
  <div class="w-4/5">
63
63
  <EpBtn
64
64
  block
65
- :color="type === 'base' ? 'text-black' : 'text-white'"
66
65
  rounded
67
66
  :type="type"
68
67
  :prependIcon="renderIcon"
@@ -64,7 +64,7 @@ const { title, intentions, cover, hideCover, version, labelCard, hideIcon, manda
64
64
  </template>
65
65
  <template #content>
66
66
  <div
67
- class="flex flex-col items-center border rounded-lg bg-neutral-100 md:flex-row mt-2 dark:bg-neutral-200"
67
+ class="flex flex-col items-center border rounded-lg bg-base-light md:flex-row mt-2 dark:bg-dark"
68
68
  >
69
69
  <template v-if="!hideCover">
70
70
  <img
@@ -75,7 +75,7 @@ const { title, intentions, cover, hideCover, version, labelCard, hideIcon, manda
75
75
  />
76
76
  <div
77
77
  v-else
78
- 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"
78
+ 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-base-dark dark:text-white"
79
79
  >
80
80
  <EpIcon :icon-path="mdiLaptop" size="95"></EpIcon>
81
81
  </div>
@@ -81,23 +81,23 @@ const goto = (term:string) =>{
81
81
  </script>
82
82
 
83
83
  <template>
84
- <div class="dark:bg-gray-300">
84
+ <div class="dark:bg-dark">
85
85
  <div v-if="definition">
86
- <div class="h-min border border-stone-300 rounded-lg divide-y">
86
+ <div class="h-min border border-base rounded-lg divide-y">
87
87
  <h2 class="text-xl font-semibold p-2">{{ definition.term }}</h2>
88
88
  <div class="flex justify-between">
89
89
  <div :class="sizeGramIngo">
90
- <p class="text-sm font-medium bg-stone-100 p-2">
90
+ <p class="text-sm font-medium bg-base-light dark:text-dark p-2">
91
91
  {{labels.information}}
92
92
  </p>
93
93
  <div class="px-2 py-1">{{ definition.graminfo }}</div>
94
94
  </div>
95
95
  <div :class="sizeDomain" v-if="definition.domain">
96
- <p class="text-sm font-medium bg-stone-100 p-2">{{labels.domain}}</p>
96
+ <p class="text-sm font-medium bg-base-light dark:text-dark p-2">{{labels.domain}}</p>
97
97
  <div class="px-2 py-1">{{ definition.domain }}</div>
98
98
  </div>
99
99
  <div :class="sizeVariations" v-if="definition.variation.length > 0">
100
- <p class="text-sm font-medium bg-stone-100 p-2">{{labels.variations}}</p>
100
+ <p class="text-sm font-medium bg-base-light dark:text-dark p-2">{{labels.variations}}</p>
101
101
  <div class="px-2 py-1">
102
102
  <span v-for="(variation, i) in definition.variation" :key="`v-${i}`">{{ variation }}{{
103
103
  definition.variation.length > i + 1 ? ", " :
@@ -117,7 +117,7 @@ const goto = (term:string) =>{
117
117
 
118
118
  <div>
119
119
  <div v-if="definition.relation.length > 0">
120
- <p class="text-sm font-medium bg-stone-100 p-2"> {{labels.relations}}</p>
120
+ <p class="text-sm font-medium bg-base-light dark:text-dark p-2"> {{labels.relations}}</p>
121
121
  <div class="p-2">
122
122
  <template v-for="(relation, i) in findRelations(definition.relation)" :key="`relation-${i}`">
123
123
  <button class="p-1 border rounded mr-1" @click="goto(relation.term)">
@@ -99,10 +99,10 @@ const { title, headerImgColor, big } = toRefs(props);
99
99
  class="p-4 md:items-center backdrop-blur-md backdrop-brightness-50 backdrop-opacity-75 rounded"
100
100
  >
101
101
  <div class="text-center md:text-left">
102
- <h1 v-if="title" class="text-xl font-medium tracking-tight text-white sm:text-3xl">
102
+ <h1 v-if="title" class="text-xl font-medium text-white sm:text-3xl">
103
103
  {{ title }}
104
104
  </h1>
105
- <h2 v-if="subtitle" class="max-w-xl mt-4 text-xl tracking-tight text-white contrast-50">
105
+ <h2 v-if="subtitle" class="max-w-xl mt-4 text-xl text-white contrast-50">
106
106
  {{ subtitle }}
107
107
  </h2>
108
108
  </div>
@@ -29,7 +29,7 @@ const styleTextAutor = computed(() => {
29
29
  if (props.card) {
30
30
  return `text-white`;
31
31
  }
32
- return `text-neutral-500`;
32
+ return `text-black dark:text-white`;
33
33
  });
34
34
 
35
35
  const imageStyle = computed(() => {
@@ -53,7 +53,7 @@ const { author, img, card, hideIcon } = toRefs(props);
53
53
  alt="Image of quote" />
54
54
  </div>
55
55
  <div class="flex items-center justify-center px-7" v-else-if="!hideIcon">
56
- <div :class="card ? 'text-white':'text-stone-700'">
56
+ <div :class="card ? 'text-white':'text-base dark:text-white'">
57
57
  <EpIcon :size="60" :icon-path="mdiFormatQuoteOpen"></EpIcon>
58
58
  </div>
59
59
  </div>
@@ -1,4 +0,0 @@
1
- import { R as f } from "./index-CWNyTRsL.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { S as f } from "./index-CWNyTRsL.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { N as f } from "./index-CWNyTRsL.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { D as f } from "./index-CWNyTRsL.js";
2
- export {
3
- f as default
4
- };