ep-lib-ts 1.0.7 → 1.0.9

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 (101) hide show
  1. package/dist/BgAudio-BlOciyyF.js +4 -0
  2. package/dist/DisplayBox--nQC58Wz.js +4 -0
  3. package/dist/EpAlert-QGrmQLQt.js +4 -0
  4. package/dist/EpAudio-Be6gEVdg.js +4 -0
  5. package/dist/EpBadge-DhXfn7fR.js +4 -0
  6. package/dist/EpBarChart-HpEteRLK.js +4 -0
  7. package/dist/EpBtn-DyBggdCv.js +4 -0
  8. package/dist/EpCard--19q8qYw.js +4 -0
  9. package/dist/EpChip-DiITptwm.js +4 -0
  10. package/dist/EpContentSlider-BXGQeVMO.js +4 -0
  11. package/dist/{EpDarkmode-D1jXUoSC.js → EpDarkmode-DWA0voFO.js} +1 -1
  12. package/dist/EpDivider-dxrA-dR_.js +4 -0
  13. package/dist/EpEdu-CpZ3i0qV.js +4 -0
  14. package/dist/EpFlex-DH-BVeZM.js +4 -0
  15. package/dist/EpFunnelChart-DfGxToS2.js +4 -0
  16. package/dist/EpHeader-CbMyaQGx.js +4 -0
  17. package/dist/{EpHover-nZS2pYFG.js → EpHover-DXdOPnDn.js} +1 -1
  18. package/dist/EpIcon-LsoGsku9.js +4 -0
  19. package/dist/EpIframe-Bxx1QSf-.js +4 -0
  20. package/dist/EpImg-C-0Z-znf.js +4 -0
  21. package/dist/{EpInput-B27QoOBx.js → EpInput-TeZRmmUX.js} +1 -1
  22. package/dist/EpLineChart-DRl8dezs.js +4 -0
  23. package/dist/EpLink-Cj-DpeQa.js +4 -0
  24. package/dist/EpLinkVersion-Cm4u6Xql.js +4 -0
  25. package/dist/{EpList-DIO_ZIFr.js → EpList-5mOPFQ9O.js} +1 -1
  26. package/dist/EpModal-CFbxbe6J.js +4 -0
  27. package/dist/{EpNothing-Cr3m7JTf.js → EpNothing-BoIDmqSI.js} +1 -1
  28. package/dist/EpPieChart-BTKGbAI7.js +4 -0
  29. package/dist/EpQuestion-Cin4-X_M.js +4 -0
  30. package/dist/EpQuote-D9JImqam.js +4 -0
  31. package/dist/EpRadio-C_cY0q2J.js +4 -0
  32. package/dist/EpRadioSummative-C8AbwfW2.js +4 -0
  33. package/dist/EpReading-SGqzw_0f.js +4 -0
  34. package/dist/EpResource-Dm0gFvtj.js +4 -0
  35. package/dist/EpScope-DYhlmbDU.js +4 -0
  36. package/dist/EpSection-DUxyMPRb.js +4 -0
  37. package/dist/{EpSelect-CTskxx5V.js → EpSelect-B-Z8a3Hs.js} +1 -1
  38. package/dist/EpSkeleton-DC5OUtB5.js +4 -0
  39. package/dist/EpSoftware-O5NE-VUC.js +4 -0
  40. package/dist/EpSpinner-lw-AU-df.js +4 -0
  41. package/dist/EpSummativeTable-DmlYRZlO.js +4 -0
  42. package/dist/EpSvg-BI2nItA_.js +4 -0
  43. package/dist/EpTable-Y_3g-9Vy.js +4 -0
  44. package/dist/EpTerm-Dep5q8eH.js +4 -0
  45. package/dist/EpText-CnEpRINM.js +4 -0
  46. package/dist/EpTimeLine-CVdYHgaO.js +4 -0
  47. package/dist/EpVideo-DGjvXSCJ.js +4 -0
  48. package/dist/EpVideoPanopto-BlVj2hYY.js +4 -0
  49. package/dist/EpWordDef-CfrzDlt2.js +4 -0
  50. package/dist/components/basics/EpImg.vue.d.ts +4 -0
  51. package/dist/components/medias/EpCarousel.vue.d.ts +4 -0
  52. package/dist/ep-lib-ts.js +1 -1
  53. package/dist/ep-lib-ts.umd.cjs +2 -2
  54. package/dist/{index-BZaMooWT.js → index-yJ38QWap.js} +580 -564
  55. package/dist/style.css +1 -1
  56. package/package.json +1 -1
  57. package/src/components/basics/EpImg.vue +177 -119
  58. package/src/components/medias/EpCarousel.vue +30 -8
  59. package/dist/BgAudio-D0BwVnii.js +0 -4
  60. package/dist/DisplayBox-B3jLORDu.js +0 -4
  61. package/dist/EpAlert-D5AOZDyu.js +0 -4
  62. package/dist/EpAudio-BAVn7Gy8.js +0 -4
  63. package/dist/EpBadge-CN9Fg8sD.js +0 -4
  64. package/dist/EpBarChart-C52e3Mbz.js +0 -4
  65. package/dist/EpBtn-DxrWf_6y.js +0 -4
  66. package/dist/EpCard-XTDLhqEF.js +0 -4
  67. package/dist/EpChip-BUrLsOFK.js +0 -4
  68. package/dist/EpContentSlider-FwYItAWJ.js +0 -4
  69. package/dist/EpDivider-o4AVzJRd.js +0 -4
  70. package/dist/EpEdu-BsEWOTfl.js +0 -4
  71. package/dist/EpFlex-D3XiP-Ra.js +0 -4
  72. package/dist/EpFunnelChart-kJQY8nsy.js +0 -4
  73. package/dist/EpHeader-CcVcrJVb.js +0 -4
  74. package/dist/EpIcon-DSM8BNpa.js +0 -4
  75. package/dist/EpIframe-cjC7BBGu.js +0 -4
  76. package/dist/EpImg-Ccjnd-bG.js +0 -4
  77. package/dist/EpLineChart-Di24eSaw.js +0 -4
  78. package/dist/EpLink-C5hN_hjD.js +0 -4
  79. package/dist/EpLinkVersion-CuI6JzA0.js +0 -4
  80. package/dist/EpModal-BM979tQ-.js +0 -4
  81. package/dist/EpPieChart-CV4A5nSn.js +0 -4
  82. package/dist/EpQuestion-FC0tDPMy.js +0 -4
  83. package/dist/EpQuote-Ce2SMrW3.js +0 -4
  84. package/dist/EpRadio-BIJU0eLQ.js +0 -4
  85. package/dist/EpRadioSummative-B04LRKD6.js +0 -4
  86. package/dist/EpReading-DWrILG_f.js +0 -4
  87. package/dist/EpResource-Bmkn_JKt.js +0 -4
  88. package/dist/EpScope-CGUMWNrb.js +0 -4
  89. package/dist/EpSection-DM9t-9CY.js +0 -4
  90. package/dist/EpSkeleton-DVyxuzQ8.js +0 -4
  91. package/dist/EpSoftware-BVu58Hnm.js +0 -4
  92. package/dist/EpSpinner-FS5o8YG9.js +0 -4
  93. package/dist/EpSummativeTable-ByMD9LrS.js +0 -4
  94. package/dist/EpSvg-DNGYQ1Pd.js +0 -4
  95. package/dist/EpTable-Bq2_17qt.js +0 -4
  96. package/dist/EpTerm-CubK5Of7.js +0 -4
  97. package/dist/EpText-2tBQKmQ-.js +0 -4
  98. package/dist/EpTimeLine-DPxKR6hE.js +0 -4
  99. package/dist/EpVideo-BdWZutia.js +0 -4
  100. package/dist/EpVideoPanopto-BZ4JWjbT.js +0 -4
  101. package/dist/EpWordDef-BhzmB00q.js +0 -4
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- .content[data-v-fd7a0787]{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-b3568685],.v-leave-active[data-v-b3568685]{transition:opacity .5s ease}.v-enter-from[data-v-b3568685],.v-leave-to[data-v-b3568685]{opacity:0}.katex[data-v-f9e5d352]{font-size:1.6em}.content[data-v-fba69535]{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}
1
+ .content[data-v-fd7a0787]{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-57ddb82d],.v-leave-active[data-v-57ddb82d]{transition:opacity .5s ease}.v-enter-from[data-v-57ddb82d],.v-leave-to[data-v-57ddb82d]{opacity:0}.katex[data-v-f9e5d352]{font-size:1.6em}.content[data-v-fba69535]{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}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ep-lib-ts",
3
3
  "private": false,
4
- "version": "1.0.7",
4
+ "version": "1.0.9",
5
5
  "files": [
6
6
  "dist",
7
7
  "src/components/"
@@ -1,144 +1,202 @@
1
1
  <script setup lang="ts">
2
- import { toRefs, ref, computed } from 'vue'
3
- import { type SizeThumbnail, sizeThumbnailStyle } from '../../types/Image'
4
- import { useImage } from '@vueuse/core'
5
- import EpModal from '../interactions/EpModal.vue'
6
- import EpIcon from '../basics/EpIcon.vue'
7
- import EpBtn from './EpBtn.vue'
8
- import { mdiArrowExpandAll } from '@mdi/js';
9
- import { mdiImage } from '@mdi/js';
10
- import { mdiImageRemove } from '@mdi/js';
2
+ import { toRefs, ref, computed } from "vue";
3
+ import { type SizeThumbnail, sizeThumbnailStyle } from "../../types/Image";
4
+ import { useImage } from "@vueuse/core";
5
+ import EpModal from "../interactions/EpModal.vue";
6
+ import EpIcon from "../basics/EpIcon.vue";
7
+ import EpBtn from "./EpBtn.vue";
8
+ import { mdiArrowExpandAll } from "@mdi/js";
9
+ import { mdiImage } from "@mdi/js";
10
+ import { mdiImageRemove } from "@mdi/js";
11
11
  import { useRenderText } from "../../composables/useRenderText";
12
12
 
13
13
  interface Props {
14
- src: string;
15
- alt?: string;
16
- height?: string | number;
17
- width?: string | number;
18
- thumbnail?: boolean;
19
- sizeThumbnail?: SizeThumbnail;
20
- caption?: string;
21
- bib?: string;
22
- title?: string;
23
- noModal?:boolean;
24
- cols?: string | number; //posible type à venir => basis-1/12... basis-11/12 to basis-full
25
- labels?:{
14
+ src: string;
15
+ alt?: string;
16
+ height?: string | number;
17
+ width?: string | number;
18
+ thumbnail?: boolean;
19
+ sizeThumbnail?: SizeThumbnail;
20
+ caption?: string;
21
+ bib?: string;
22
+ title?: string;
23
+ noModal?: boolean;
24
+ cols?: string | number; //posible type à venir => basis-1/12... basis-11/12 to basis-full
25
+ labels?: {
26
26
  reference?: string;
27
- fermer?:string;
28
- referenceLibrary?:string;
29
- }
27
+ fermer?: string;
28
+ referenceLibrary?: string;
29
+ };
30
+ locale?: "en" | "fr" | "es";
30
31
  }
31
32
 
32
33
  const props = withDefaults(defineProps<Props>(), {
33
- alt: "Image snfas",
34
- cols: "6",
35
- thumbnail: false,
36
- noModal:false,
37
- sizeThumbnail:"medium",
38
- labels:()=>{
39
- return {
40
- reference: "Référence",
41
- fermer:"Fermer",
42
- referenceLibrary:"Référence bibliographique"
43
- }
44
- }
45
- })
34
+ alt: "Image snfas",
35
+ cols: "6",
36
+ thumbnail: false,
37
+ noModal: false,
38
+ sizeThumbnail: "medium",
39
+ labels: () => {
40
+ return {
41
+ reference: "Référence",
42
+ fermer: "Fermer",
43
+ referenceLibrary: "Référence bibliographique",
44
+ };
45
+ },
46
+ locale: "fr",
47
+ });
48
+
49
+ switch (props.locale) {
50
+ case "en":
51
+ props.labels.fermer = "Close";
52
+ props.labels.reference = "Reference";
53
+ props.labels.referenceLibrary = "Reference Library";
54
+ break;
55
+ case "es":
56
+ props.labels.fermer = "Cerrar";
57
+ props.labels.reference = "Referencia";
58
+ props.labels.referenceLibrary = "Biblioteca de referencias";
59
+ break;
60
+ case "fr":
61
+ default:
62
+ props.labels.fermer = "Fermer";
63
+ props.labels.reference = "Référence";
64
+ props.labels.referenceLibrary = "Référence bibliographique";
65
+ break;
66
+ }
46
67
 
47
68
  const Cols = [
48
- 'basis-6/12',
49
- 'basis-1/12',
50
- 'basis-2/12',
51
- 'basis-3/12',
52
- 'basis-4/12',
53
- 'basis-5/12',
54
- 'basis-6/12',
55
- 'basis-7/12',
56
- 'basis-8/12',
57
- 'basis-9/12',
58
- 'basis-10/12',
59
- 'basis-11/12',
60
- 'basis-full',
61
- ]
69
+ "basis-6/12",
70
+ "basis-1/12",
71
+ "basis-2/12",
72
+ "basis-3/12",
73
+ "basis-4/12",
74
+ "basis-5/12",
75
+ "basis-6/12",
76
+ "basis-7/12",
77
+ "basis-8/12",
78
+ "basis-9/12",
79
+ "basis-10/12",
80
+ "basis-11/12",
81
+ "basis-full",
82
+ ];
62
83
 
63
84
  const renderCols = computed(() => {
64
- return Cols[+props.cols]
65
- })
85
+ return Cols[+props.cols];
86
+ });
66
87
 
67
- const renderBib = computed(()=>{
68
- if(props.bib){
69
- return useRenderText(props.bib)
70
- }
71
- return ""
72
- })
88
+ const renderBib = computed(() => {
89
+ if (props.bib) {
90
+ return useRenderText(props.bib);
91
+ }
92
+ return "";
93
+ });
73
94
 
74
- const showModal = ref<boolean>(false)
75
-
76
- const toggleModal = ():void => {
77
- if(props.noModal){
78
- return
79
- }
80
- showModal.value = !showModal.value
81
- }
95
+ const showModal = ref<boolean>(false);
82
96
 
83
- const showBib = ref<boolean>(false)
97
+ const toggleModal = (): void => {
98
+ if (props.noModal) {
99
+ return;
100
+ }
101
+ showModal.value = !showModal.value;
102
+ };
84
103
 
85
- const toggleBib = ():void => {
86
- showBib.value = !showBib.value
87
- }
104
+ const showBib = ref<boolean>(false);
88
105
 
89
- const styleSizeThumbnail = computed(()=> {
90
- return sizeThumbnailStyle[props.sizeThumbnail]
91
- })
106
+ const toggleBib = (): void => {
107
+ showBib.value = !showBib.value;
108
+ };
92
109
 
93
- const { isLoading, error } = useImage({ src: props.src })
94
- const { src, alt, title, caption, thumbnail, bib, sizeThumbnail } = toRefs(props)
110
+ const styleSizeThumbnail = computed(() => {
111
+ return sizeThumbnailStyle[props.sizeThumbnail];
112
+ });
95
113
 
114
+ const { isLoading, error } = useImage({ src: props.src });
115
+ const { src, alt, title, caption, thumbnail, bib, sizeThumbnail } =
116
+ toRefs(props);
96
117
  </script>
97
118
 
98
119
  <template>
99
- <div :class="thumbnail?'inline-block':''">
100
- <div v-if="!thumbnail" class="flex m-2">
101
- <div :class="`mx-auto bg-white dark:bg-dark rounded-md overflow-hidden shadow-md ${renderCols}`">
102
- <template v-if="isLoading">
103
- <span class="text-gray-200"><EpIcon :icon-path="mdiImage" size="250"></EpIcon></span>
104
- </template>
105
- <template v-else-if="error">
106
- <span class="text-red-200"><EpIcon :icon-path="mdiImageRemove" size="150"></EpIcon></span>
107
- </template>
108
- <template v-else>
109
- <img class="object-cover object-center w-full" :src="src" :alt="alt" @click="toggleModal">
110
- </template>
111
- <div class="px-4 py-2 dark:border-l dark:border-b dark:border-r dark:border-white dark:rounded-b-md " v-if="title || caption || bib">
112
- <h2 class="text-2xl dark:text-white font-bold">{{ title }}</h2>
113
- <p class="text-gray-500 dark:text-white text-sm mt-4">{{ caption }}</p>
114
- <div class="text-right"><EpBtn @click="toggleBib" size="small">{{labels.reference}}</EpBtn></div>
115
- </div>
116
- </div>
120
+ <div :class="thumbnail ? 'inline-block' : ''">
121
+ <div v-if="!thumbnail" class="flex m-2">
122
+ <div
123
+ :class="`mx-auto bg-white dark:bg-dark rounded-md overflow-hidden shadow-md ${renderCols}`"
124
+ >
125
+ <template v-if="isLoading">
126
+ <span class="text-gray-200"
127
+ ><EpIcon :icon-path="mdiImage" size="250"></EpIcon
128
+ ></span>
129
+ </template>
130
+ <template v-else-if="error">
131
+ <span class="text-red-200"
132
+ ><EpIcon :icon-path="mdiImageRemove" size="150"></EpIcon
133
+ ></span>
134
+ </template>
135
+ <template v-else>
136
+ <img
137
+ class="object-cover object-center w-full"
138
+ :src="src"
139
+ :alt="alt"
140
+ @click="toggleModal"
141
+ />
142
+ </template>
143
+ <div
144
+ class="px-4 py-2 dark:border-l dark:border-b dark:border-r dark:border-white dark:rounded-b-md"
145
+ v-if="title || caption || bib"
146
+ >
147
+ <h2 class="text-2xl dark:text-white font-bold">{{ title }}</h2>
148
+ <p class="text-gray-500 dark:text-white text-sm mt-4">
149
+ {{ caption }}
150
+ </p>
151
+ <div class="text-right">
152
+ <EpBtn @click="toggleBib" size="small">{{
153
+ labels.reference
154
+ }}</EpBtn>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ <div v-if="thumbnail" class="relative group inline-block m-2">
160
+ <img
161
+ :class="`${styleSizeThumbnail} object-cover object-center group-hover:opacity-30 `"
162
+ :src="src"
163
+ :alt="alt"
164
+ />
165
+ <div
166
+ :class="`absolute top-0 left-0 ${styleSizeThumbnail} bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-30 cursor-pointer`"
167
+ @click="toggleModal"
168
+ >
169
+ <div
170
+ class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center"
171
+ >
172
+ <EpIcon :icon-path="mdiArrowExpandAll"></EpIcon>
173
+ </div>
117
174
  </div>
118
- <div v-if="thumbnail" class="relative group inline-block m-2">
119
- <img :class="`${styleSizeThumbnail} object-cover object-center group-hover:opacity-30 `" :src="src" :alt="alt">
120
- <div
121
- :class="`absolute top-0 left-0 ${styleSizeThumbnail} bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-30 cursor-pointer`"
122
- @click="toggleModal">
123
- <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center">
124
- <EpIcon :icon-path="mdiArrowExpandAll"></EpIcon>
125
- </div>
126
- </div>
175
+ </div>
176
+ <EpModal v-model="showModal">
177
+ <img
178
+ class="object-cover object-center h-5/6 w-5/6 mx-auto"
179
+ :src="src"
180
+ :alt="alt"
181
+ @click="toggleModal"
182
+ />
183
+ <div class="px-4 py-2" v-if="thumbnail">
184
+ <h2 class="text-2xl dark:text-white font-bold">{{ title }}</h2>
185
+ <p class="text-gray-500 dark:text-white text-sm mt-4">{{ caption }}</p>
186
+ <div
187
+ class="text-gray-700 dark:text-white mt-4"
188
+ v-html="renderBib"
189
+ ></div>
127
190
  </div>
128
- <EpModal v-model="showModal">
129
- <img class="object-cover object-center h-5/6 w-5/6 mx-auto" :src="src" :alt="alt" @click="toggleModal"/>
130
- <div class="px-4 py-2" v-if="thumbnail">
131
- <h2 class="text-2xl dark:text-white font-bold">{{ title }}</h2>
132
- <p class="text-gray-500 dark:text-white text-sm mt-4">{{ caption }}</p>
133
- <div class="text-gray-700 dark:text-white mt-4" v-html="renderBib"></div>
134
- </div>
135
- <!-- <div class="flex justify-end"><EpBtn @click="toggleModal" size="small" type="error" outlined>Fermer</EpBtn></div> -->
136
- </EpModal>
137
- <EpModal v-model="showBib" :title="labels.referenceLibrary">
138
-
139
- <div class="text-gray-700 dark:text-white mt-4" v-html="renderBib"></div>
140
- <div class="flex justify-end"><EpBtn @click="toggleBib" size="small" type="error" outlined>{{labels.fermer}}</EpBtn></div>
141
- </EpModal>
142
- </div>
191
+ <!-- <div class="flex justify-end"><EpBtn @click="toggleModal" size="small" type="error" outlined>Fermer</EpBtn></div> -->
192
+ </EpModal>
193
+ <EpModal v-model="showBib" :title="labels.referenceLibrary">
194
+ <div class="text-gray-700 dark:text-white mt-4" v-html="renderBib"></div>
195
+ <div class="flex justify-end">
196
+ <EpBtn @click="toggleBib" size="small" type="error" outlined>{{
197
+ labels.fermer
198
+ }}</EpBtn>
199
+ </div>
200
+ </EpModal>
201
+ </div>
143
202
  </template>
144
-
@@ -14,14 +14,16 @@ interface Props {
14
14
  gallery?: boolean;
15
15
  labelRef?: string | null;
16
16
  labelClose?: string | null;
17
- sizeThumbnail?: SizeThumbnail
17
+ sizeThumbnail?: SizeThumbnail;
18
+ locale?: "en" | "fr" | "es";
18
19
  }
19
20
 
20
21
  const props = withDefaults(defineProps<Props>(), {
21
22
  labelClose: "Fermer",
22
23
  labelRef: "Référence",
23
24
  gallery: false,
24
- sizeThumbnail:"medium"
25
+ sizeThumbnail: "medium",
26
+ locale: "fr",
25
27
  });
26
28
 
27
29
  const currentIndex = ref<number>(0);
@@ -29,7 +31,9 @@ const dialog = ref<boolean>(false);
29
31
 
30
32
  const prevSlide = () => {
31
33
  const isFirstSlide = currentIndex.value === 0;
32
- const newIndex = isFirstSlide ? props.carrouselImg.length - 1 : currentIndex.value - 1;
34
+ const newIndex = isFirstSlide
35
+ ? props.carrouselImg.length - 1
36
+ : currentIndex.value - 1;
33
37
  currentIndex.value = newIndex;
34
38
  };
35
39
 
@@ -53,7 +57,9 @@ const { carrouselImg, labelClose, labelRef, sizeThumbnail } = toRefs(props);
53
57
  <EpIcon :icon-path="mdiChevronRightCircleOutline"></EpIcon>
54
58
  </button>
55
59
  </div>
56
- <div class="bg-white dark:bg-dark shadow-xl p-4 lg:max-w-[800px] mx-auto border-solid border">
60
+ <div
61
+ class="bg-white dark:bg-dark shadow-xl p-4 lg:max-w-[800px] mx-auto border-solid border"
62
+ >
57
63
  <!-- <div class="max-w-[800px] h-[550px] m-auto relative">
58
64
  <div
59
65
  class="w-full h-full bg-center duration-500"
@@ -61,9 +67,16 @@ const { carrouselImg, labelClose, labelRef, sizeThumbnail } = toRefs(props);
61
67
  ></div>
62
68
  </div> -->
63
69
 
64
- <img :src="carrouselImg[currentIndex].src" alt="image" class="rounded-sm" />
70
+ <img
71
+ :src="carrouselImg[currentIndex].src"
72
+ alt="image"
73
+ class="rounded-sm"
74
+ />
65
75
 
66
- <div v-if="carrouselImg[currentIndex]?.caption" class="mt-2 text-sm text-base-dark dark:text-white">
76
+ <div
77
+ v-if="carrouselImg[currentIndex]?.caption"
78
+ class="mt-2 text-sm text-base-dark dark:text-white"
79
+ >
67
80
  {{ carrouselImg[currentIndex].caption }}
68
81
  </div>
69
82
  <div v-if="carrouselImg[currentIndex]?.bib" class="flex justify-end mt-2">
@@ -73,13 +86,22 @@ const { carrouselImg, labelClose, labelRef, sizeThumbnail } = toRefs(props);
73
86
  <EpModal v-model="dialog" title="Référence">
74
87
  <div v-html="carrouselImg[currentIndex].bib"></div>
75
88
  <div class="flex justify-end">
76
- <EpBtn @click="dialog = false" type="primary" dark>{{ labelClose }}</EpBtn>
89
+ <EpBtn @click="dialog = false" type="primary" dark>{{
90
+ labelClose
91
+ }}</EpBtn>
77
92
  </div>
78
93
  </EpModal>
79
94
  </div>
80
95
  <div v-else class="flex flex-wrap">
81
96
  <template v-for="image in carrouselImg" :key="`image-${image?.uid}`">
82
- <EpImg :src="image.src" :bib="image.bib" :caption="image.caption" thumbnail :size-thumbnail="sizeThumbnail"></EpImg>
97
+ <EpImg
98
+ :src="image.src"
99
+ :bib="image.bib"
100
+ :caption="image.caption"
101
+ thumbnail
102
+ :size-thumbnail="sizeThumbnail"
103
+ :locale="locale"
104
+ ></EpImg>
83
105
  </template>
84
106
  </div>
85
107
  </template>
@@ -1,4 +0,0 @@
1
- import { S as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { T as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { O as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { E as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { c as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { o } from "./index-BZaMooWT.js";
2
- export {
3
- o as default
4
- };
@@ -1,4 +0,0 @@
1
- import { d as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { e } from "./index-BZaMooWT.js";
2
- export {
3
- e as default
4
- };
@@ -1,4 +0,0 @@
1
- import { f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { z as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { g as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { s } from "./index-BZaMooWT.js";
2
- export {
3
- s as default
4
- };
@@ -1,4 +0,0 @@
1
- import { h as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { p as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { P as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { i as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { F as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { j as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { q as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { G as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { H as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { B as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { r } from "./index-BZaMooWT.js";
2
- export {
3
- r as default
4
- };
@@ -1,4 +0,0 @@
1
- import { C as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { Q as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { x as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { y as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { b as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { t } from "./index-BZaMooWT.js";
2
- export {
3
- t as default
4
- };
@@ -1,4 +0,0 @@
1
- import { v as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { k as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { R as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { I as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { l as f } from "./index-BZaMooWT.js";
2
- export {
3
- f as default
4
- };