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.
- package/dist/BgAudio-BlOciyyF.js +4 -0
- package/dist/DisplayBox--nQC58Wz.js +4 -0
- package/dist/EpAlert-QGrmQLQt.js +4 -0
- package/dist/EpAudio-Be6gEVdg.js +4 -0
- package/dist/EpBadge-DhXfn7fR.js +4 -0
- package/dist/EpBarChart-HpEteRLK.js +4 -0
- package/dist/EpBtn-DyBggdCv.js +4 -0
- package/dist/EpCard--19q8qYw.js +4 -0
- package/dist/EpChip-DiITptwm.js +4 -0
- package/dist/EpContentSlider-BXGQeVMO.js +4 -0
- package/dist/{EpDarkmode-D1jXUoSC.js → EpDarkmode-DWA0voFO.js} +1 -1
- package/dist/EpDivider-dxrA-dR_.js +4 -0
- package/dist/EpEdu-CpZ3i0qV.js +4 -0
- package/dist/EpFlex-DH-BVeZM.js +4 -0
- package/dist/EpFunnelChart-DfGxToS2.js +4 -0
- package/dist/EpHeader-CbMyaQGx.js +4 -0
- package/dist/{EpHover-nZS2pYFG.js → EpHover-DXdOPnDn.js} +1 -1
- package/dist/EpIcon-LsoGsku9.js +4 -0
- package/dist/EpIframe-Bxx1QSf-.js +4 -0
- package/dist/EpImg-C-0Z-znf.js +4 -0
- package/dist/{EpInput-B27QoOBx.js → EpInput-TeZRmmUX.js} +1 -1
- package/dist/EpLineChart-DRl8dezs.js +4 -0
- package/dist/EpLink-Cj-DpeQa.js +4 -0
- package/dist/EpLinkVersion-Cm4u6Xql.js +4 -0
- package/dist/{EpList-DIO_ZIFr.js → EpList-5mOPFQ9O.js} +1 -1
- package/dist/EpModal-CFbxbe6J.js +4 -0
- package/dist/{EpNothing-Cr3m7JTf.js → EpNothing-BoIDmqSI.js} +1 -1
- package/dist/EpPieChart-BTKGbAI7.js +4 -0
- package/dist/EpQuestion-Cin4-X_M.js +4 -0
- package/dist/EpQuote-D9JImqam.js +4 -0
- package/dist/EpRadio-C_cY0q2J.js +4 -0
- package/dist/EpRadioSummative-C8AbwfW2.js +4 -0
- package/dist/EpReading-SGqzw_0f.js +4 -0
- package/dist/EpResource-Dm0gFvtj.js +4 -0
- package/dist/EpScope-DYhlmbDU.js +4 -0
- package/dist/EpSection-DUxyMPRb.js +4 -0
- package/dist/{EpSelect-CTskxx5V.js → EpSelect-B-Z8a3Hs.js} +1 -1
- package/dist/EpSkeleton-DC5OUtB5.js +4 -0
- package/dist/EpSoftware-O5NE-VUC.js +4 -0
- package/dist/EpSpinner-lw-AU-df.js +4 -0
- package/dist/EpSummativeTable-DmlYRZlO.js +4 -0
- package/dist/EpSvg-BI2nItA_.js +4 -0
- package/dist/EpTable-Y_3g-9Vy.js +4 -0
- package/dist/EpTerm-Dep5q8eH.js +4 -0
- package/dist/EpText-CnEpRINM.js +4 -0
- package/dist/EpTimeLine-CVdYHgaO.js +4 -0
- package/dist/EpVideo-DGjvXSCJ.js +4 -0
- package/dist/EpVideoPanopto-BlVj2hYY.js +4 -0
- package/dist/EpWordDef-CfrzDlt2.js +4 -0
- package/dist/components/basics/EpImg.vue.d.ts +4 -0
- package/dist/components/medias/EpCarousel.vue.d.ts +4 -0
- package/dist/ep-lib-ts.js +1 -1
- package/dist/ep-lib-ts.umd.cjs +2 -2
- package/dist/{index-BZaMooWT.js → index-yJ38QWap.js} +580 -564
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/basics/EpImg.vue +177 -119
- package/src/components/medias/EpCarousel.vue +30 -8
- package/dist/BgAudio-D0BwVnii.js +0 -4
- package/dist/DisplayBox-B3jLORDu.js +0 -4
- package/dist/EpAlert-D5AOZDyu.js +0 -4
- package/dist/EpAudio-BAVn7Gy8.js +0 -4
- package/dist/EpBadge-CN9Fg8sD.js +0 -4
- package/dist/EpBarChart-C52e3Mbz.js +0 -4
- package/dist/EpBtn-DxrWf_6y.js +0 -4
- package/dist/EpCard-XTDLhqEF.js +0 -4
- package/dist/EpChip-BUrLsOFK.js +0 -4
- package/dist/EpContentSlider-FwYItAWJ.js +0 -4
- package/dist/EpDivider-o4AVzJRd.js +0 -4
- package/dist/EpEdu-BsEWOTfl.js +0 -4
- package/dist/EpFlex-D3XiP-Ra.js +0 -4
- package/dist/EpFunnelChart-kJQY8nsy.js +0 -4
- package/dist/EpHeader-CcVcrJVb.js +0 -4
- package/dist/EpIcon-DSM8BNpa.js +0 -4
- package/dist/EpIframe-cjC7BBGu.js +0 -4
- package/dist/EpImg-Ccjnd-bG.js +0 -4
- package/dist/EpLineChart-Di24eSaw.js +0 -4
- package/dist/EpLink-C5hN_hjD.js +0 -4
- package/dist/EpLinkVersion-CuI6JzA0.js +0 -4
- package/dist/EpModal-BM979tQ-.js +0 -4
- package/dist/EpPieChart-CV4A5nSn.js +0 -4
- package/dist/EpQuestion-FC0tDPMy.js +0 -4
- package/dist/EpQuote-Ce2SMrW3.js +0 -4
- package/dist/EpRadio-BIJU0eLQ.js +0 -4
- package/dist/EpRadioSummative-B04LRKD6.js +0 -4
- package/dist/EpReading-DWrILG_f.js +0 -4
- package/dist/EpResource-Bmkn_JKt.js +0 -4
- package/dist/EpScope-CGUMWNrb.js +0 -4
- package/dist/EpSection-DM9t-9CY.js +0 -4
- package/dist/EpSkeleton-DVyxuzQ8.js +0 -4
- package/dist/EpSoftware-BVu58Hnm.js +0 -4
- package/dist/EpSpinner-FS5o8YG9.js +0 -4
- package/dist/EpSummativeTable-ByMD9LrS.js +0 -4
- package/dist/EpSvg-DNGYQ1Pd.js +0 -4
- package/dist/EpTable-Bq2_17qt.js +0 -4
- package/dist/EpTerm-CubK5Of7.js +0 -4
- package/dist/EpText-2tBQKmQ-.js +0 -4
- package/dist/EpTimeLine-DPxKR6hE.js +0 -4
- package/dist/EpVideo-BdWZutia.js +0 -4
- package/dist/EpVideoPanopto-BZ4JWjbT.js +0 -4
- 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-
|
|
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,144 +1,202 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import { toRefs, ref, computed } from
|
|
3
|
-
import { type SizeThumbnail, sizeThumbnailStyle } from
|
|
4
|
-
import { useImage } from
|
|
5
|
-
import EpModal from
|
|
6
|
-
import EpIcon from
|
|
7
|
-
import EpBtn from
|
|
8
|
-
import { mdiArrowExpandAll } from
|
|
9
|
-
import { mdiImage } from
|
|
10
|
-
import { mdiImageRemove } from
|
|
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
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
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
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
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
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
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
|
-
|
|
65
|
-
})
|
|
85
|
+
return Cols[+props.cols];
|
|
86
|
+
});
|
|
66
87
|
|
|
67
|
-
const renderBib = computed(()=>{
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
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
|
|
97
|
+
const toggleModal = (): void => {
|
|
98
|
+
if (props.noModal) {
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
showModal.value = !showModal.value;
|
|
102
|
+
};
|
|
84
103
|
|
|
85
|
-
const
|
|
86
|
-
showBib.value = !showBib.value
|
|
87
|
-
}
|
|
104
|
+
const showBib = ref<boolean>(false);
|
|
88
105
|
|
|
89
|
-
const
|
|
90
|
-
|
|
91
|
-
}
|
|
106
|
+
const toggleBib = (): void => {
|
|
107
|
+
showBib.value = !showBib.value;
|
|
108
|
+
};
|
|
92
109
|
|
|
93
|
-
const
|
|
94
|
-
|
|
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
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
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
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
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
|
-
<
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
</
|
|
137
|
-
|
|
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
|
|
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
|
|
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
|
|
70
|
+
<img
|
|
71
|
+
:src="carrouselImg[currentIndex].src"
|
|
72
|
+
alt="image"
|
|
73
|
+
class="rounded-sm"
|
|
74
|
+
/>
|
|
65
75
|
|
|
66
|
-
<div
|
|
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>{{
|
|
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
|
|
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>
|
package/dist/BgAudio-D0BwVnii.js
DELETED
package/dist/EpAlert-D5AOZDyu.js
DELETED
package/dist/EpAudio-BAVn7Gy8.js
DELETED
package/dist/EpBadge-CN9Fg8sD.js
DELETED
package/dist/EpBtn-DxrWf_6y.js
DELETED
package/dist/EpCard-XTDLhqEF.js
DELETED
package/dist/EpChip-BUrLsOFK.js
DELETED
package/dist/EpEdu-BsEWOTfl.js
DELETED
package/dist/EpFlex-D3XiP-Ra.js
DELETED
package/dist/EpIcon-DSM8BNpa.js
DELETED
package/dist/EpImg-Ccjnd-bG.js
DELETED
package/dist/EpLink-C5hN_hjD.js
DELETED
package/dist/EpModal-BM979tQ-.js
DELETED
package/dist/EpQuote-Ce2SMrW3.js
DELETED
package/dist/EpRadio-BIJU0eLQ.js
DELETED
package/dist/EpScope-CGUMWNrb.js
DELETED