ep-lib-ts 1.0.77 → 1.0.79
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/components/basics/EpAvatar.vue.js +55 -1
- package/dist/components/basics/EpAvatar.vue.js.map +1 -1
- package/dist/components/basics/EpAvatar.vue2.js +1 -55
- package/dist/components/basics/EpAvatar.vue2.js.map +1 -1
- package/dist/components/basics/EpStackedList.vue.js +1 -1
- package/dist/components/basics/EpText.vue.js +12 -1
- package/dist/components/basics/EpText.vue.js.map +1 -1
- package/dist/components/educationals/EpBranchingScenario.vue2.js +2 -2
- package/dist/components/educationals/EpResource.vue.js +1 -1
- package/dist/components/educationals/EpResource.vue.js.map +1 -1
- package/dist/components/interactions/EpContentSlider.vue.js +1 -1
- package/dist/components/interactions/EpContentSlider.vue.js.map +1 -1
- package/dist/components/interactions/EpDraggable.vue.js +73 -19
- package/dist/components/interactions/EpDraggable.vue.js.map +1 -1
- package/dist/components/interactions/EpQuestion.vue.js +1 -1
- package/dist/components/interactions/EpQuestion.vue.js.map +1 -1
- package/dist/components/medias/EpHierarchy.vue2.js +1 -1
- package/dist/components/medias/EpHierarchy.vue2.js.map +1 -1
- package/dist/components/tools/AsyncKatexRender.vue.js +8 -0
- package/dist/components/tools/AsyncKatexRender.vue.js.map +1 -0
- package/dist/components/tools/AsyncKatexRender.vue2.js +38 -0
- package/dist/components/tools/AsyncKatexRender.vue2.js.map +1 -0
- package/dist/components/tools/Details.vue.js +55 -1
- package/dist/components/tools/Details.vue.js.map +1 -1
- package/dist/components/tools/Details.vue2.js +1 -55
- package/dist/components/tools/Details.vue2.js.map +1 -1
- package/dist/components/tools/TextMedia.vue.js +50 -1
- package/dist/components/tools/TextMedia.vue.js.map +1 -1
- package/dist/components/tools/TextMedia.vue2.js +1 -50
- package/dist/components/tools/TextMedia.vue2.js.map +1 -1
- package/dist/components/tools/TwoColsMedia.vue2.js +2 -2
- package/dist/components/tools/TwoColsMedia.vue2.js.map +1 -1
- package/dist/style.css +88 -77
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EpDraggable.vue.js","sources":["../../../src/components/interactions/EpDraggable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, onMounted, onUnmounted } from \"vue\";\nimport { VueDraggableNext as draggable } from \"vue-draggable-next\";\nimport type { Choice } from \"~/types/Draggable\";\nimport { mdiCheckBold, mdiCloseThick } from \"@mdi/js\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport type { EpDraggableProps } from \"~/types/interactions/EpDraggable\";\n\nconst props = withDefaults(defineProps<EpDraggableProps>(), {});\n\n// Manage the image and its size\n\nconst originalWidth = ref(0);\nconst originalHeight = ref(0);\n\nconst actualRect = ref({ width: 0, height: 0 });\nconst myImage = ref<HTMLImageElement | null>(null);\n\nconst updateSize = () => {\n if (!myImage.value) return;\n\n const rect = myImage.value.getBoundingClientRect();\n actualRect.value = { width: rect.width, height: rect.height };\n\n //console.log('Image size updated. Width:', actualRect.value.width, 'Height:', actualRect.value.height);\n};\n\nonMounted(() => {\n window.addEventListener(\"resize\", updateSize);\n});\nonUnmounted(() => {\n window.removeEventListener(\"resize\", updateSize);\n});\n\nconst handleImageLoad = (event: any) => {\n originalWidth.value = event.target.naturalWidth;\n originalHeight.value = event.target.naturalHeight;\n\n // console.log('Image loaded. Width:', originalWidth.value, 'Height:', originalHeight.value);\n\n updateSize();\n};\n\nconst xRatio = computed(() => {\n if (actualRect.value.width == 0) return 1;\n return actualRect.value.width / originalWidth.value;\n});\n\nconst yRatio = computed(() => {\n if (actualRect.value.height == 0) return 1;\n return actualRect.value.height / originalHeight.value;\n});\n\n// Créer une copie réactive de props.answers\nconst availableAnswers = ref([...props.answers]);\n\nconst choices = ref<Choice[]>(\n props.sockets.map((s) => {\n return {\n choice: [],\n expected: s.correctAnswer,\n allowPut: true,\n };\n })\n);\n\n// Manage drag and drop\nconst onAdd = (event: any, index: number) => {\n // console.log(event.clone);\n\n // Retirer l'élément de la liste des réponses disponibles\n availableAnswers.value = availableAnswers.value.filter(\n (item) => item.name !== event.clone.name\n );\n choices.value[index].allowPut = false;\n};\n\nconst onRemove = (event: any, index: number) => {\n // console.log(event.clone);\n\n choices.value[index].choice = [];\n choices.value[index].allowPut = true;\n};\n\n// Manage verification buttons\nconst validating = ref(false);\n\nconst validate = () => {\n validating.value = true;\n choices.value.forEach((choice) => {\n choice.allowPut = false;\n });\n};\n\nconst retry = () => {\n validating.value = false;\n availableAnswers.value = [...props.answers];\n choices.value.forEach((choice) => {\n choice.choice = [];\n choice.allowPut = true;\n });\n};\n</script>\n\n<template>\n <div class=\"flex flex-col\">\n <div class=\"grid grid-cols-3 gap-3 w-full my-8\">\n <!-- Draggable answers block -->\n <div class=\"col-span-1 m-6\">\n <draggable\n class=\"dragArea bg-gray-700 rounded-md p-4 min-h-5 list-group w-full\"\n v-model=\"availableAnswers\"\n :group=\"{ name: 'answers', pull: !validating, put: !validating }\"\n >\n <div\n class=\"list-group-item bg-gray-300 dark:bg-gray-800 m-1 p-3 rounded-md text-center flex justify-center items-center\"\n v-for=\"element in availableAnswers\"\n :key=\"element.name\"\n >\n <img\n class=\"cursor-grab active:cursor-grabbing max-w-32 rounded\"\n v-if=\"element.isImg\"\n :src=\"element.src\"\n alt=\"img\"\n />\n <p class=\"cursor-grab active:cursor-grabbing\" v-else>\n {{ element.name }}\n </p>\n </div>\n </draggable>\n </div>\n\n <!-- Drop area block -->\n <div class=\"col-span-2 relative\">\n <img\n @load=\"handleImageLoad\"\n ref=\"myImage\"\n :src=\"props.src\"\n alt=\"img\"\n class=\"w-full h-full select-none\"\n />\n <draggable\n class=\"dropArea absolute bg-gray-300 dark:bg-gray-800 p-4 rounded-md min-w-14 max-w-32\"\n v-for=\"(socket, index) in props.sockets\"\n :key=\"index\"\n v-model=\"choices[index].choice\"\n :group=\"{ put: choices[index].allowPut }\"\n :style=\"{\n left: socket.xPos * xRatio + 'px',\n top: socket.yPos * yRatio + 'px',\n }\"\n @add=\"onAdd($event, index)\"\n @remove=\"onRemove($event, index)\"\n >\n <img\n class=\"cursor-grab active:cursor-grabbing rounded\"\n v-if=\"choices[index].choice[0] && choices[index].choice[0].isImg\"\n :src=\"choices[index].choice[0].src\"\n alt=\"img\"\n />\n <p\n class=\"cursor-grab active:cursor-grabbing\"\n v-else-if=\"choices[index].choice[0]\"\n >\n {{ choices[index].choice[0].name }}\n </p>\n <span\n v-if=\"\n validating &&\n choices[index].choice[0]?.name !== choices[index].expected\n \"\n class=\"absolute -top-5 -right-5 bg-red-500 text-white px-2 py-1 rounded-md\"\n >\n <EpIcon :iconPath=\"mdiCloseThick\" size=\"18\" />\n </span>\n <span\n v-if=\"\n validating &&\n choices[index].choice[0]?.name === choices[index].expected\n \"\n class=\"absolute -top-5 -right-5 bg-green-500 text-white px-2 py-1 rounded-md\"\n >\n <EpIcon :iconPath=\"mdiCheckBold\" size=\"18\" />\n </span>\n </draggable>\n </div>\n </div>\n\n <!-- Verification buttons -->\n <div class=\"flex justify-center gap-4 mt-8\">\n <button\n class=\"bg-blue-500 text-white px-3 py-2 rounded-md text-center\"\n @click=\"validate\"\n >\n Valider\n </button>\n <button\n class=\"bg-blue-500 text-white px-3 py-2 rounded-md text-center\"\n @click=\"retry\"\n >\n Recommencer\n </button>\n </div>\n </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_createVNode","_unref","draggable","_Fragment","_renderList","_toDisplayString","_createBlock","_normalizeStyle","EpIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"EpDraggable.vue.js","sources":["../../../src/components/interactions/EpDraggable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, onMounted, onUnmounted, watch } from \"vue\";\nimport { VueDraggableNext as draggable } from \"vue-draggable-next\";\nimport type { Choice } from \"~/types/Draggable\";\nimport { mdiCheckBold, mdiCloseThick } from \"@mdi/js\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport type { EpDraggableProps } from \"~/types/interactions/EpDraggable\";\n\nconst props = withDefaults(defineProps<EpDraggableProps>(), {});\n\n// Manage the image and its size\n\nconst originalWidth = ref(0);\nconst originalHeight = ref(0);\n\nconst actualRect = ref({ width: 0, height: 0 });\nconst myImage = ref<HTMLImageElement | null>(null);\n\nconst updateSize = () => {\n if (!myImage.value) return;\n\n const rect = myImage.value.getBoundingClientRect();\n actualRect.value = { width: rect.width, height: rect.height };\n\n //console.log('Image size updated. Width:', actualRect.value.width, 'Height:', actualRect.value.height);\n};\n\nonMounted(() => {\n window.addEventListener(\"resize\", updateSize);\n});\nonUnmounted(() => {\n window.removeEventListener(\"resize\", updateSize);\n});\n\nconst handleImageLoad = (event: any) => {\n originalWidth.value = event.target.naturalWidth;\n originalHeight.value = event.target.naturalHeight;\n\n // console.log('Image loaded. Width:', originalWidth.value, 'Height:', originalHeight.value);\n\n updateSize();\n};\n\nconst xRatio = computed(() => {\n if (actualRect.value.width == 0) return 1;\n return actualRect.value.width / originalWidth.value;\n});\n\nconst yRatio = computed(() => {\n if (actualRect.value.height == 0) return 1;\n return actualRect.value.height / originalHeight.value;\n});\n\n// Créer une copie réactive de props.answers\nconst availableAnswers = ref([...props.answers]);\n\nconst choices = ref<Choice[]>(\n props.sockets.map((s) => {\n return {\n choice: [],\n expected: s.correctAnswer,\n allowPut: true,\n };\n })\n);\n\n// Watch for changes in props to sync\nwatch(() => props.answers, (newAnswers) => {\n if (!validating.value) {\n availableAnswers.value = [...newAnswers];\n }\n}, { deep: true });\n\nwatch(() => props.sockets, (newSockets) => {\n choices.value = newSockets.map((s) => {\n return {\n choice: [],\n expected: s.correctAnswer,\n allowPut: true,\n };\n });\n}, { deep: true });\n\n// Manage drag and drop\nconst onAdd = (event: any, index: number) => {\n // If there's already an item, prevent the add and return it to available answers\n if (choices.value[index].choice.length > 1) {\n const duplicateItem = choices.value[index].choice.pop();\n if (duplicateItem) {\n availableAnswers.value.push(duplicateItem);\n }\n return;\n }\n\n // Retirer l'élément de la liste des réponses disponibles\n availableAnswers.value = availableAnswers.value.filter(\n (item) => item.name !== event.clone.name\n );\n choices.value[index].allowPut = false;\n};\n\nconst onRemove = (event: any, index: number) => {\n // console.log(event.clone);\n\n choices.value[index].choice = [];\n choices.value[index].allowPut = true;\n};\n\n// Manage verification buttons\nconst validating = ref(false);\n\nconst validate = () => {\n validating.value = true;\n choices.value.forEach((choice) => {\n choice.allowPut = false;\n });\n};\n\nconst retry = () => {\n validating.value = false;\n availableAnswers.value = [...props.answers];\n choices.value.forEach((choice) => {\n choice.choice = [];\n choice.allowPut = true;\n });\n};\n\n// Check if all answers are placed correctly\nconst allCorrect = computed(() => {\n if (!validating.value) return false;\n return choices.value.every(\n (choice) => choice.choice[0]?.name === choice.expected\n );\n});\n\n// Count correct answers\nconst correctCount = computed(() => {\n if (!validating.value) return 0;\n return choices.value.filter(\n (choice) => choice.choice[0]?.name === choice.expected\n ).length;\n});\n</script>\n\n<template>\n <div class=\"flex flex-col\">\n <!-- Success Message -->\n <div\n v-if=\"validating && allCorrect\"\n class=\"mb-4 p-4 bg-green-100 dark:bg-green-900/30 border-2 border-green-500 rounded-lg text-center\"\n >\n <p class=\"text-green-700 dark:text-green-300 font-bold text-lg\">\n 🎉 Félicitations ! Toutes les réponses sont correctes !\n </p>\n </div>\n\n <!-- Score Display -->\n <div\n v-if=\"validating && !allCorrect\"\n class=\"mb-4 p-3 bg-blue-100 dark:bg-blue-900/30 border border-blue-500 rounded-lg text-center\"\n >\n <p class=\"text-blue-700 dark:text-blue-300 font-medium\">\n Score: {{ correctCount }} / {{ choices.length }}\n </p>\n </div>\n\n <div class=\"grid grid-cols-3 gap-3 w-full my-8\">\n <!-- Draggable answers block -->\n <div class=\"col-span-1 m-6\">\n <draggable\n class=\"dragArea bg-gray-700 rounded-md p-4 min-h-5 list-group w-full\"\n v-model=\"availableAnswers\"\n :group=\"{ name: 'answers', pull: !validating, put: !validating }\"\n >\n <div\n class=\"list-group-item bg-gray-300 dark:bg-gray-800 m-1 p-3 rounded-md text-center flex justify-center items-center\"\n v-for=\"element in availableAnswers\"\n :key=\"element.name\"\n >\n <img\n class=\"cursor-grab active:cursor-grabbing max-w-32 rounded\"\n v-if=\"element.isImg\"\n :src=\"element.src\"\n alt=\"img\"\n />\n <p class=\"cursor-grab active:cursor-grabbing\" v-else>\n {{ element.name }}\n </p>\n </div>\n </draggable>\n </div>\n\n <!-- Drop area block -->\n <div class=\"col-span-2 relative\">\n <img\n @load=\"handleImageLoad\"\n ref=\"myImage\"\n :src=\"props.src\"\n alt=\"img\"\n class=\"w-full h-full select-none\"\n />\n <draggable\n class=\"dropArea absolute bg-gray-300 dark:bg-gray-800 p-4 rounded-md min-w-14 max-w-32\"\n v-for=\"(socket, index) in props.sockets\"\n :key=\"index\"\n v-model=\"choices[index].choice\"\n :group=\"{ put: choices[index].allowPut }\"\n :style=\"{\n left: socket.xPos * xRatio + 'px',\n top: socket.yPos * yRatio + 'px',\n }\"\n @add=\"onAdd($event, index)\"\n @remove=\"onRemove($event, index)\"\n >\n <img\n class=\"cursor-grab active:cursor-grabbing rounded\"\n v-if=\"choices[index].choice[0] && choices[index].choice[0].isImg\"\n :src=\"choices[index].choice[0].src\"\n alt=\"img\"\n />\n <p\n class=\"cursor-grab active:cursor-grabbing\"\n v-else-if=\"choices[index].choice[0]\"\n >\n {{ choices[index].choice[0].name }}\n </p>\n <span\n v-if=\"\n validating &&\n choices[index].choice[0]?.name !== choices[index].expected\n \"\n class=\"absolute -top-5 -right-5 bg-red-500 text-white px-2 py-1 rounded-md\"\n >\n <EpIcon :iconPath=\"mdiCloseThick\" size=\"18\" />\n </span>\n <span\n v-if=\"\n validating &&\n choices[index].choice[0]?.name === choices[index].expected\n \"\n class=\"absolute -top-5 -right-5 bg-green-500 text-white px-2 py-1 rounded-md\"\n >\n <EpIcon :iconPath=\"mdiCheckBold\" size=\"18\" />\n </span>\n </draggable>\n </div>\n </div>\n\n <!-- Verification buttons -->\n <div class=\"flex justify-center gap-4 mt-8\">\n <button\n class=\"bg-blue-500 text-white px-3 py-2 rounded-md text-center\"\n @click=\"validate\"\n >\n Valider\n </button>\n <button\n class=\"bg-blue-500 text-white px-3 py-2 rounded-md text-center\"\n @click=\"retry\"\n >\n Recommencer\n </button>\n </div>\n </div>\n</template>"],"names":["_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_createVNode","_unref","draggable","_Fragment","_renderList","_createBlock","_normalizeStyle","EpIcon"],"mappings":"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"}
|
|
@@ -103,7 +103,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
103
103
|
return defineAsyncComponent(() => import("../signages/EpNothing.vue.js"));
|
|
104
104
|
}
|
|
105
105
|
return defineAsyncComponent(
|
|
106
|
-
() => __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../basics/EpAvatar.vue": () => import("../basics/EpAvatar.
|
|
106
|
+
() => __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../basics/EpAvatar.vue": () => import("../basics/EpAvatar.vue2.js"), "../basics/EpBadge.vue": () => import("../basics/EpBadge.vue.js"), "../basics/EpBtn.vue": () => import("../basics/EpBtn.vue2.js"), "../basics/EpCard.vue": () => import("../basics/EpCard.vue2.js"), "../basics/EpChip.vue": () => import("../basics/EpChip.vue2.js"), "../basics/EpDivider.vue": () => import("../basics/EpDivider.vue2.js"), "../basics/EpFlex.vue": () => import("../basics/EpFlex.vue2.js"), "../basics/EpHover.vue": () => import("../basics/EpHover.vue2.js"), "../basics/EpHoverCard.vue": () => import("../basics/EpHoverCard.vue2.js"), "../basics/EpIcon.vue": () => import("../basics/EpIcon.vue2.js"), "../basics/EpImg.vue": () => import("../basics/EpImg.vue2.js"), "../basics/EpImgCarousel.vue": () => import("../basics/EpImgCarousel.vue2.js"), "../basics/EpList.vue": () => import("../basics/EpList.vue.js"), "../basics/EpListItem.vue": () => import("../basics/EpListItem.vue2.js"), "../basics/EpSection.vue": () => import("../basics/EpSection.vue2.js"), "../basics/EpSectionCols.vue": () => import("../basics/EpSectionCols.vue2.js"), "../basics/EpSpinner.vue": () => import("../basics/EpSpinner.vue2.js"), "../basics/EpStackedList.vue": () => import("../basics/EpStackedList.vue2.js"), "../basics/EpTable.vue": () => import("../basics/EpTable.vue2.js"), "../basics/EpText.vue": () => import("../basics/EpText.vue2.js"), "../charts/EpBarChart.vue": () => import("../charts/EpBarChart.vue2.js"), "../charts/EpFunnelChart.vue": () => import("../charts/EpFunnelChart.vue2.js"), "../charts/EpLineChart.vue": () => import("../charts/EpLineChart.vue2.js"), "../charts/EpPieChart.vue": () => import("../charts/EpPieChart.vue2.js"), "../educationals/EpBranchingScenario.vue": () => import("../educationals/EpBranchingScenario.vue.js"), "../educationals/EpCodeblock.vue": () => import("../educationals/EpCodeblock.vue3.js"), "../educationals/EpConclusion.vue": () => import("../educationals/EpConclusion.vue2.js"), "../educationals/EpDescription.vue": () => import("../educationals/EpDescription.vue2.js"), "../educationals/EpDocument.vue": () => import("../educationals/EpDocument.vue2.js"), "../educationals/EpEdu.vue": () => import("../educationals/EpEdu.vue2.js"), "../educationals/EpInstructions.vue": () => import("../educationals/EpInstructions.vue2.js"), "../educationals/EpIntroduction.vue": () => import("../educationals/EpIntroduction.vue2.js"), "../educationals/EpObjective.vue": () => import("../educationals/EpObjective.vue2.js"), "../educationals/EpReading.vue": () => import("../educationals/EpReading.vue2.js"), "../educationals/EpResource.vue": () => import("../educationals/EpResource.vue2.js"), "../educationals/EpScope.vue": () => import("../educationals/EpScope.vue2.js"), "../educationals/EpSpecificObjective.vue": () => import("../educationals/EpSpecificObjective.vue2.js"), "../forms/EpCheckbox.vue": () => import("../forms/EpCheckbox.vue.js"), "../forms/EpInput.vue": () => import("../forms/EpInput.vue.js"), "../forms/EpRadio.vue": () => import("../forms/EpRadio.vue.js"), "../forms/EpRadioSummative.vue": () => import("../forms/EpRadioSummative.vue.js"), "../forms/EpSelect.vue": () => import("../forms/EpSelect.vue.js"), "../forms/EpSwitch.vue": () => import("../forms/EpSwitch.vue.js"), "../forms/EpTextarea.vue": () => import("../forms/EpTextarea.vue.js"), "../forms/EpToggle.vue": () => import("../forms/EpToggle.vue.js"), "./Ep360Image.vue": () => import("./Ep360Image.vue.js"), "./Ep360Video.vue": () => import("./Ep360Video.vue.js"), "./EpAccordeon.vue": () => import("./EpAccordeon.vue.js"), "./EpContentSlider.vue": () => import("./EpContentSlider.vue2.js"), "./EpDarkMode.vue": () => import("./EpDarkMode.vue2.js"), "./EpDraggable.vue": () => import("./EpDraggable.vue2.js"), "./EpFlipCard.vue": () => import("./EpFlipCard.vue.js"), "./EpHotSpot.vue": () => import("./EpHotSpot.vue2.js"), "./EpModal.vue": () => import("./EpModal.vue3.js"), "./EpQuestion.vue": () => import("./EpQuestion.vue2.js"), "./EpSummativeTable.vue": () => import("./EpSummativeTable.vue2.js"), "./EpSvgShow.vue": () => import("./EpSvgShow.vue2.js"), "./EpTabs.vue": () => import("./EpTabs.vue.js"), "./EpTooltip.vue": () => import("./EpTooltip.vue2.js"), "../medias/EpAudio.vue": () => import("../medias/EpAudio.vue2.js"), "../medias/EpCardLink.vue": () => import("../medias/EpCardLink.vue2.js"), "../medias/EpCarousel.vue": () => import("../medias/EpCarousel.vue2.js"), "../medias/EpHierarchy.vue": () => import("../medias/EpHierarchy.vue.js"), "../medias/EpIframe.vue": () => import("../medias/EpIframe.vue2.js"), "../medias/EpKatex.vue": () => import("../medias/EpKatex.vue.js"), "../medias/EpLink.vue": () => import("../medias/EpLink.vue2.js"), "../medias/EpLinkVersion.vue": () => import("../medias/EpLinkVersion.vue2.js"), "../medias/EpLottieSvg.vue": () => import("../medias/EpLottieSvg.vue2.js"), "../medias/EpSensibleImage.vue": () => import("../medias/EpSensibleImage.vue.js"), "../medias/EpSoftware.vue": () => import("../medias/EpSoftware.vue2.js"), "../medias/EpSvg.vue": () => import("../medias/EpSvg.vue2.js"), "../medias/EpTerm.vue": () => import("../medias/EpTerm.vue2.js"), "../medias/EpTimeLine.vue": () => import("../medias/EpTimeLine.vue.js"), "../medias/EpVideo.vue": () => import("../medias/EpVideo.vue2.js"), "../medias/EpVideoPanopto.vue": () => import("../medias/EpVideoPanopto.vue2.js"), "../medias/EpWordDef.vue": () => import("../medias/EpWordDef.vue2.js"), "../signages/EpAlert.vue": () => import("../signages/EpAlert.vue.js"), "../signages/EpBadge.vue": () => import("../signages/EpBadge.vue2.js"), "../signages/EpHeader.vue": () => import("../signages/EpHeader.vue2.js"), "../signages/EpNothing.vue": () => import("../signages/EpNothing.vue.js"), "../signages/EpQuote.vue": () => import("../signages/EpQuote.vue2.js"), "../signages/EpSkeleton.vue": () => import("../signages/EpSkeleton.vue.js"), "../tools/AsyncKatexRender.vue": () => import("../tools/AsyncKatexRender.vue.js"), "../tools/BgAudio.vue": () => import("../tools/BgAudio.vue.js"), "../tools/Details.vue": () => import("../tools/Details.vue2.js"), "../tools/DisplayBox.vue": () => import("../tools/DisplayBox.vue.js"), "../tools/SvgFilter.vue": () => import("../tools/SvgFilter.vue.js"), "../tools/TextMedia.vue": () => import("../tools/TextMedia.vue2.js"), "../tools/TimelineItem.vue": () => import("../tools/TimelineItem.vue.js"), "../tools/TwoColsMedia.vue": () => import("../tools/TwoColsMedia.vue.js") }), `../${componentToLoad.path}/${componentToLoad.name}.vue`, 3)
|
|
107
107
|
);
|
|
108
108
|
};
|
|
109
109
|
const { title, hideIcon, question, src } = toRefs(props);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EpQuestion.vue.js","sources":["../../../src/components/interactions/EpQuestion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { watch, ref, toRefs, computed, defineAsyncComponent } from \"vue\";\nimport EpEdu from \"~/components/educationals/EpEdu.vue\";\nimport { type Answer } from \"~/types/Answer\";\nimport { useRenderText } from \"~/composables/useRenderText\";\nimport { useComponent } from \"~/composables/useComponent\";\nimport { mdiHelpCircle } from \"@mdi/js\";\nimport EpImg from \"~/components/basics/EpImg.vue\";\nimport EpRadio from \"~/components/forms/EpRadio.vue\";\nimport EpBtn from \"~/components/basics/EpBtn.vue\";\nimport EpAlert from \"~/components/signages/EpAlert.vue\";\nimport type { EpQuestionProps } from \"~/types/interactions/EpQuestion\";\n\nconst props = withDefaults(defineProps<EpQuestionProps>(), {\n type: \"neutral\",\n hideIcon: false,\n shuffle: false,\n before: false,\n numeration: false,\n labelNoAnswer: \"Veuillez choisir une réponse\",\n labelAnswerBtn: \"Valider\",\n labelTryAgainBtn: \"Réessayer\",\n});\n\nconst renderText = computed(() => {\n if (!props.intentions) {\n return null;\n }\n return useRenderText(props.intentions);\n});\n\n//shuffle and list\nconst shuffleAnswers = computed(() => {\n const array = props.answers;\n if (props.shuffle) {\n for (let i = array.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n const temp = array[i];\n array[i] = array[j];\n array[j] = temp;\n }\n }\n return array;\n});\n\nconst alphabet = [\"A\", \"B\", \"C\", \"D\", \"E\", \"F\", \"G\", \"H\", \"I\", \"J\"];\nconst typeList = (index: number) => {\n if (props.numeration) {\n return alphabet[index];\n }\n return index + 1;\n};\n\n///user answer\nconst userAnswer = ref(\"\");\nconst answered = ref(false);\nconst valid = ref(true);\nconst response = ref<Answer>({\n type: \"warning\",\n text: \"no found\",\n component: null,\n feedback: \"\",\n});\nconst checkAnswer = () => {\n if (userAnswer.value === \"\") {\n valid.value = false;\n return;\n }\n const valuesAnswer = props.answers.find((x) => x.uid === userAnswer.value);\n if (!valuesAnswer) {\n return;\n }\n response.value = valuesAnswer!;\n answered.value = true;\n};\n\nconst reset = () => {\n answered.value = false;\n userAnswer.value = \"\";\n};\n\nwatch(userAnswer, (val) => {\n if (val !== \"\") {\n valid.value = true;\n }\n});\n\n//get Component asyncComponent\nconst getCompontent = (name: string | undefined) => {\n const componentToLoad = useComponent(name);\n //console.log(componentToLoad)\n if (componentToLoad.name === \"EpNothing\") {\n return defineAsyncComponent(() => import(\"../signages/EpNothing.vue\"));\n }\n return defineAsyncComponent(\n () => import(`../${componentToLoad.path}/${componentToLoad.name}.vue`)\n );\n};\n\n//returned values from props\nconst { title, intentions, hideIcon, question, src } = toRefs(props);\n</script>\n\n<template>\n <EpEdu\n :title=\"title\"\n :type=\"type\"\n :hideIcon=\"hideIcon\"\n :icon=\"mdiHelpCircle\"\n :label-intentions=\"labelIntentions\"\n card\n >\n <template #intentions v-if=\"renderText\">\n <div v-html=\"renderText\" />\n </template>\n <template #content>\n <div class=\"mt-5\">\n <EpImg\n v-if=\"src && before\"\n :src=\"src\"\n :alt=\"`Image soutien à la question`\"\n cols=\"5\"\n />\n <div v-html=\"useRenderText(question)\" class=\"my-6\" />\n <EpImg\n v-if=\"src && !before\"\n :src=\"src\"\n :alt=\"`Image soutien à la question`\"\n cols=\"5\"\n />\n\n <div class=\"mb-6\">\n <ol class=\"no-list\">\n <li v-for=\"(answer, i) in shuffleAnswers\" :key=\"answer.uid\">\n <EpRadio\n :label=\"`${typeList(i)}. ${answer.text}`\"\n v-model=\"userAnswer\"\n :value=\"answer.uid\"\n :disabled=\"answered\"\n type=\"primary\"\n ></EpRadio>\n </li>\n </ol>\n <EpAlert type=\"error\" outlined noIcon v-if=\"!valid\">\n {{ labelNoAnswer }}\n </EpAlert>\n </div>\n\n <div v-if=\"answered\" class=\"mb-2\">\n <EpAlert :type=\"response.type\" outlined>\n <div v-html=\"useRenderText(response.feedback)\" />\n </EpAlert>\n\n <div v-if=\"response.component\" class=\"my-2\">\n <component\n :is=\"getCompontent(response.component.type)\"\n v-bind=\"{ ...response.component.data }\"\n ></component>\n </div>\n </div>\n\n <EpBtn\n type=\"primary\"\n @click=\"checkAnswer\"\n :disabled=\"answered\"\n outlined\n extraClass=\"mr-2\"\n >{{ labelAnswerBtn }}</EpBtn\n >\n <EpBtn type=\"primary\" v-if=\"answered\" @click=\"reset\" outlined>{{\n labelTryAgainBtn\n }}</EpBtn>\n </div>\n </template>\n <!-- <template #actions>\n <EpBtn :color=\"type=='base'?'text-gray-700':'text-white'\" :type=\"type\">[Repair btn style... to change]</EpBtn>\n </template> -->\n </EpEdu>\n</template>\n"],"names":["_createBlock","EpEdu","_unref","type","labelIntentions","_createElementVNode","before","EpImg","_openBlock","_createElementBlock","_Fragment","_renderList","_createVNode","EpRadio","EpAlert","labelNoAnswer","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","EpBtn","labelAnswerBtn","labelTryAgainBtn"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"EpQuestion.vue.js","sources":["../../../src/components/interactions/EpQuestion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { watch, ref, toRefs, computed, defineAsyncComponent } from \"vue\";\nimport EpEdu from \"~/components/educationals/EpEdu.vue\";\nimport { type Answer } from \"~/types/Answer\";\nimport { useRenderText } from \"~/composables/useRenderText\";\nimport { useComponent } from \"~/composables/useComponent\";\nimport { mdiHelpCircle } from \"@mdi/js\";\nimport EpImg from \"~/components/basics/EpImg.vue\";\nimport EpRadio from \"~/components/forms/EpRadio.vue\";\nimport EpBtn from \"~/components/basics/EpBtn.vue\";\nimport EpAlert from \"~/components/signages/EpAlert.vue\";\nimport type { EpQuestionProps } from \"~/types/interactions/EpQuestion\";\n\nconst props = withDefaults(defineProps<EpQuestionProps>(), {\n type: \"neutral\",\n hideIcon: false,\n shuffle: false,\n before: false,\n numeration: false,\n labelNoAnswer: \"Veuillez choisir une réponse\",\n labelAnswerBtn: \"Valider\",\n labelTryAgainBtn: \"Réessayer\",\n});\n\nconst renderText = computed(() => {\n if (!props.intentions) {\n return null;\n }\n return useRenderText(props.intentions);\n});\n\n//shuffle and list\nconst shuffleAnswers = computed(() => {\n const array = props.answers;\n if (props.shuffle) {\n for (let i = array.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n const temp = array[i];\n array[i] = array[j];\n array[j] = temp;\n }\n }\n return array;\n});\n\nconst alphabet = [\"A\", \"B\", \"C\", \"D\", \"E\", \"F\", \"G\", \"H\", \"I\", \"J\"];\nconst typeList = (index: number) => {\n if (props.numeration) {\n return alphabet[index];\n }\n return index + 1;\n};\n\n///user answer\nconst userAnswer = ref(\"\");\nconst answered = ref(false);\nconst valid = ref(true);\nconst response = ref<Answer>({\n type: \"warning\",\n text: \"no found\",\n component: null,\n feedback: \"\",\n});\nconst checkAnswer = () => {\n if (userAnswer.value === \"\") {\n valid.value = false;\n return;\n }\n const valuesAnswer = props.answers.find((x) => x.uid === userAnswer.value);\n if (!valuesAnswer) {\n return;\n }\n response.value = valuesAnswer!;\n answered.value = true;\n};\n\nconst reset = () => {\n answered.value = false;\n userAnswer.value = \"\";\n};\n\nwatch(userAnswer, (val) => {\n if (val !== \"\") {\n valid.value = true;\n }\n});\n\n//get Component asyncComponent\nconst getCompontent = (name: string | undefined) => {\n const componentToLoad = useComponent(name);\n //console.log(componentToLoad)\n if (componentToLoad.name === \"EpNothing\") {\n return defineAsyncComponent(() => import(\"../signages/EpNothing.vue\"));\n }\n return defineAsyncComponent(\n () => import(`../${componentToLoad.path}/${componentToLoad.name}.vue`)\n );\n};\n\n//returned values from props\nconst { title, intentions, hideIcon, question, src } = toRefs(props);\n</script>\n\n<template>\n <EpEdu\n :title=\"title\"\n :type=\"type\"\n :hideIcon=\"hideIcon\"\n :icon=\"mdiHelpCircle\"\n :label-intentions=\"labelIntentions\"\n card\n >\n <template #intentions v-if=\"renderText\">\n <div v-html=\"renderText\" />\n </template>\n <template #content>\n <div class=\"mt-5\">\n <EpImg\n v-if=\"src && before\"\n :src=\"src\"\n :alt=\"`Image soutien à la question`\"\n cols=\"5\"\n />\n <div v-html=\"useRenderText(question)\" class=\"my-6\" />\n <EpImg\n v-if=\"src && !before\"\n :src=\"src\"\n :alt=\"`Image soutien à la question`\"\n cols=\"5\"\n />\n\n <div class=\"mb-6\">\n <ol class=\"no-list\">\n <li v-for=\"(answer, i) in shuffleAnswers\" :key=\"answer.uid\">\n <EpRadio\n :label=\"`${typeList(i)}. ${answer.text}`\"\n v-model=\"userAnswer\"\n :value=\"answer.uid\"\n :disabled=\"answered\"\n type=\"primary\"\n ></EpRadio>\n </li>\n </ol>\n <EpAlert type=\"error\" outlined noIcon v-if=\"!valid\">\n {{ labelNoAnswer }}\n </EpAlert>\n </div>\n\n <div v-if=\"answered\" class=\"mb-2\">\n <EpAlert :type=\"response.type\" outlined>\n <div v-html=\"useRenderText(response.feedback)\" />\n </EpAlert>\n\n <div v-if=\"response.component\" class=\"my-2\">\n <component\n :is=\"getCompontent(response.component.type)\"\n v-bind=\"{ ...response.component.data }\"\n ></component>\n </div>\n </div>\n\n <EpBtn\n type=\"primary\"\n @click=\"checkAnswer\"\n :disabled=\"answered\"\n outlined\n extraClass=\"mr-2\"\n >{{ labelAnswerBtn }}</EpBtn\n >\n <EpBtn type=\"primary\" v-if=\"answered\" @click=\"reset\" outlined>{{\n labelTryAgainBtn\n }}</EpBtn>\n </div>\n </template>\n <!-- <template #actions>\n <EpBtn :color=\"type=='base'?'text-gray-700':'text-white'\" :type=\"type\">[Repair btn style... to change]</EpBtn>\n </template> -->\n </EpEdu>\n</template>\n"],"names":["_createBlock","EpEdu","_unref","type","labelIntentions","_createElementVNode","before","EpImg","_openBlock","_createElementBlock","_Fragment","_renderList","_createVNode","EpRadio","EpAlert","labelNoAnswer","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","EpBtn","labelAnswerBtn","labelTryAgainBtn"],"mappings":"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"}
|
|
@@ -40,7 +40,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
40
40
|
currentNode.value = null;
|
|
41
41
|
};
|
|
42
42
|
const components = /* @__PURE__ */ Object.assign({
|
|
43
|
-
"../basics/EpAvatar.vue": () => import("../basics/EpAvatar.
|
|
43
|
+
"../basics/EpAvatar.vue": () => import("../basics/EpAvatar.vue2.js"),
|
|
44
44
|
"../basics/EpBadge.vue": () => import("../basics/EpBadge.vue.js"),
|
|
45
45
|
"../basics/EpBtn.vue": () => import("../basics/EpBtn.vue2.js"),
|
|
46
46
|
"../basics/EpCard.vue": () => import("../basics/EpCard.vue2.js"),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EpHierarchy.vue2.js","sources":["../../../src/components/medias/EpHierarchy.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, onMounted, computed, defineAsyncComponent } from \"vue\";\nimport {\n hierarchy,\n tree,\n cluster,\n type HierarchyPointLink,\n type HierarchyPointNode,\n} from \"d3-hierarchy\";\nimport * as d3 from \"d3-selection\";\nimport { linkVertical, linkHorizontal } from \"d3-shape\";\nimport * as d3Zoom from \"d3-zoom\";\nimport type { TreeNode } from \"~/types/Hierarchy\";\nimport type { NestedComponents } from \"~/types/Component\";\nimport { useComponent } from \"~/composables/useComponent\";\nimport EpModal from \"~/components/interactions/EpModal.vue\";\nimport EpBtn from \"~/components/basics/EpBtn.vue\";\nimport { useRenderText } from \"~/composables/useRenderText\";\nimport type { EpHierarchyProps } from \"~/types/medias/EpHierarchy\";\n\nconst props = withDefaults(defineProps<EpHierarchyProps>(), {\n labelClose: \"fermer\",\n maxWidth: 800,\n maxHeight: 600,\n isCluster: false,\n colorRect: \"fill-red-400\",\n colorPath: \"stroke-yellow-400\",\n});\n\nconst treeContainer = ref<HTMLDivElement | null>(null);\nconst treeWrapper = ref<HTMLDivElement | null>(null);\n\n/* control modal */\ntype ShowNode = {\n title: string;\n text?: string;\n component?: NestedComponents;\n};\n\nconst currentNode = ref<ShowNode | null>(null);\nconst showModal = ref(false);\n\nconst handleNodeClick = (node: TreeNode) => {\n currentNode.value = {\n title: node.name,\n text: node.text,\n component: node.component,\n };\n showModal.value = true;\n};\n\nconst closeModal = () => {\n showModal.value = false;\n currentNode.value = null;\n};\n//nested component\n\nconst components = import.meta.glob([\n \"./*.vue\", // all components in medias (same folder)\n \"../basics/*.vue\", // components/charts/\n \"../signages/*.vue\", // components/signages/\n]);\n\nconst currentRenderComponent = computed(() => {\n if (!currentNode.value || !currentNode.value.component) {\n return null;\n }\n\n const { path, name } = useComponent(currentNode.value.component.type);\n //console.log(path, name)\n let fullPath = \"\";\n if (path === \"medias\") {\n fullPath = `./${name}.vue`;\n } else {\n fullPath = `../${path}/${name}.vue`;\n }\n //console.log(fullPath)\n const loader = components[fullPath] as\n | (() => Promise<{ default: NestedComponents }>)\n | undefined;\n\n if (!loader) {\n console.warn(`Component not found: ${fullPath}`);\n return null; // or defineAsyncComponent(() => import('../fallbacks/EpNothing.vue'))\n }\n\n return defineAsyncComponent(loader);\n});\n\nonMounted(() => {\n if (!treeContainer.value) return;\n\n if (props.isCluster) {\n clusterView();\n } else {\n treeView();\n }\n});\n\nconst treeView = () => {\n const rectW = 130;\n const rectH = 40;\n const margin = { top: 40, right: 40, bottom: 40, left: 40 };\n\n const root = hierarchy<TreeNode>(props.nodes);\n //const totalLeafCount = root.leaves().length\n const width = Math.max(props.maxWidth);\n const height = props.maxHeight;\n\n const treeLayout = tree<TreeNode>().nodeSize([200, 100]); // [x spacing, y spacing]\n\n const treeData = treeLayout(root);\n\n const svg = d3\n .select(treeContainer.value)\n .append(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n const g = svg\n .append(\"g\")\n .attr(\"transform\", `translate(${margin.left}, ${margin.top})`);\n\n const zoom = d3Zoom\n .zoom<SVGSVGElement, unknown>()\n .scaleExtent([0.1, 2])\n .on(\"zoom\", (event) => {\n g.attr(\"transform\", event.transform);\n });\n\n svg.call(zoom);\n\n const centerX = width / 2 - treeData.x;\n const centerY = 30; //height / 2 - treeData.y\n const identity = (d3Zoom as any).zoomIdentity;\n svg.call(zoom.transform, identity.translate(centerX, centerY));\n\n // Links\n const linkPath = linkVertical<\n HierarchyPointLink<TreeNode>,\n HierarchyPointNode<TreeNode>\n >()\n .x((d) => d.x)\n .y((d) => d.y);\n\n g.selectAll(\"path.link\")\n .data(treeData.links())\n .enter()\n .append(\"path\")\n .attr(\"d\", (d) => linkPath(d))\n .attr(\"class\", (d) => {\n const link = d.target.data.active\n ? `${props.colorPath} stroke-2`\n : \"stroke-black dark:stroke-white\";\n return `${link} link fill-none`;\n });\n\n // Nodes\n const node = g\n .selectAll(\"g.node\")\n .data(treeData.descendants())\n .enter()\n .append(\"g\")\n .attr(\"class\", \"node\")\n .attr(\"transform\", (d) => `translate(${d.x}, ${d.y})`)\n .style(\"cursor\", (d) =>\n d.data.component || d.data.text ? \"pointer\" : \"default\"\n )\n .each(function (d) {\n if (d.data.component || d.data.text) {\n d3.select(this).on(\"click\", (_event) => handleNodeClick(d.data));\n }\n });\n //.style('cursor', 'pointer')\n //.on('click', (_event, d) => handleNodeClick(d.data))\n\n node.each(function (d) {\n const group = d3.select(this);\n\n // Append text temporarily\n const text = group\n .append(\"text\")\n .attr(\"class\", \"text-sm font-semibold fill-black dark:fill-white\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"dy\", \".35em\")\n .text((d.data.label) ? d.data.label : d.data.name);\n\n // Get bounding box to determine text size\n const bbox = (text.node() as SVGTextElement).getBBox();\n const paddingX = 10;\n const paddingY = 10;\n\n const width = bbox.width + paddingX * 2;\n const height = bbox.height + paddingY * 2;\n\n // Draw rect using text size\n group\n .insert(\"rect\", \"text\")\n .attr(\"class\", props.colorRect)\n .attr(\"x\", -width / 2)\n .attr(\"y\", -height / 2)\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"rx\", 4)\n .attr(\"ry\", 4);\n });\n\n node\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"dy\", \".35em\")\n .attr(\"class\", \"text-sm font-semibold fill-white dark:fill-black\")\n .attr(\"text-anchor\", \"middle\")\n .text((d) => {return (d.data.label) ? d.data.label : d.data.name})\n .style(\"pointer-events\", \"none\");\n};\n\nconst clusterView = () => {\n const rectW = 130;\n const rectH = 40;\n const margin = { top: 40, right: 40, bottom: 40, left: 40 };\n\n const root = hierarchy<TreeNode>(props.nodes);\n //const totalLeafCount = root.leaves().length\n const width = Math.max(props.maxWidth);\n const height = props.maxHeight;\n\n const treeLayout = cluster<TreeNode>().nodeSize([130, 200]); // [x spacing, y spacing]\n\n const treeData = treeLayout(root);\n\n const svg = d3\n .select(treeContainer.value)\n .append(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n const g = svg\n .append(\"g\")\n .attr(\"transform\", `translate(${margin.left}, ${margin.top})`);\n\n const zoom = d3Zoom\n .zoom<SVGSVGElement, unknown>()\n .scaleExtent([0.1, 4])\n .on(\"zoom\", (event) => {\n g.attr(\"transform\", event.transform);\n });\n\n svg.call(zoom);\n\n const centerX = 30;\n const centerY = height / 2 - treeData.x;\n const identity = (d3Zoom as any).zoomIdentity;\n svg.call(zoom.transform, identity.translate(centerX, centerY));\n\n // Links\n const linkPath = linkHorizontal<\n HierarchyPointLink<TreeNode>,\n HierarchyPointNode<TreeNode>\n >()\n .x((d) => d.y)\n .y((d) => d.x);\n\n g.selectAll(\"path.link\")\n .data(treeData.links())\n .enter()\n .append(\"path\")\n .attr(\"d\", (d) => linkPath(d))\n .attr(\"class\", (d) => {\n const link = d.target.data.active\n ? `${props.colorPath} stroke-2`\n : \"stroke-black dark:stroke-white\";\n return `${link} link fill-none`;\n });\n\n // Nodes\n const node = g\n .selectAll(\"g.node\")\n .data(treeData.descendants())\n .enter()\n .append(\"g\")\n .attr(\"class\", \"node\")\n .attr(\"transform\", (d) => `translate(${d.y}, ${d.x})`)\n .style(\"cursor\", (d) =>\n d.data.component || d.data.text ? \"pointer\" : \"default\"\n )\n .each(function (d) {\n if (d.data.component || d.data.text) {\n d3.select(this).on(\"click\", (_event) => handleNodeClick(d.data));\n }\n });\n //.style('cursor', 'pointer')\n //.on('click', (_event, d) => handleNodeClick(d.data))\n\n node.each(function (d) {\n const group = d3.select(this);\n\n // Append text temporarily\n const text = group\n .append(\"text\")\n .attr(\"class\", \"text-sm font-semibold fill-black dark:fill-white\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"dy\", \".35em\")\n .text((d.data.label) ? d.data.label : d.data.name);\n\n // Get bounding box to determine text size\n const bbox = (text.node() as SVGTextElement).getBBox();\n const paddingX = 10;\n const paddingY = 10;\n\n const width = bbox.width + paddingX * 2;\n const height = bbox.height + paddingY * 2;\n\n // Draw rect using text size\n group\n .insert(\"rect\", \"text\")\n .attr(\"class\", props.colorRect)\n .attr(\"x\", -width / 2)\n .attr(\"y\", -height / 2)\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"rx\", 4)\n .attr(\"ry\", 4);\n });\n\n node\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"dy\", \".35em\")\n .attr(\"class\", \"text-sm font-semibold fill-white dark:fill-black\")\n .attr(\"text-anchor\", \"middle\")\n .text((d) => {return (d.data.label) ? d.data.label : d.data.name})\n .style(\"pointer-events\", \"none\");\n};\n\nconst maxW = computed(() => {\n return `${props.maxWidth.toString()}px`;\n});\n\nconst maxH = computed(() => {\n return `${props.maxWidth.toString()}px`;\n});\n</script>\n\n<template>\n <div>\n <div\n ref=\"treeWrapper\"\n class=\"ep-tree-wrapper mx-auto\"\n :style=\"{ maxHeight: maxH, maxWidth: maxW }\"\n >\n <div ref=\"treeContainer\" class=\"ep-tree-container\" />\n </div>\n <EpModal v-model=\"showModal\" :title=\"currentNode.title\" v-if=\"currentNode\">\n <div v-if=\"currentNode.text\" v-html=\"useRenderText(currentNode.text)\" />\n <template v-if=\"currentRenderComponent && currentNode.component\">\n <component\n :is=\"currentRenderComponent\"\n v-bind=\"{ ...currentNode.component.data }\"\n />\n </template>\n <div class=\"flex justify-end\">\n <EpBtn @click=\"closeModal\" type=\"error\" outlined rounded>{{\n labelClose\n }}</EpBtn>\n </div>\n </EpModal>\n </div>\n</template>\n\n<style scoped>\n.ep-tree-wrapper {\n overflow: auto;\n border: 1px solid #ddd;\n}\n\n.ep-tree-container {\n width: 100%;\n overflow-x: auto;\n}\n</style>\n"],"names":["width","height","_createElementBlock","_createElementVNode","_normalizeStyle","_createBlock","EpModal","_unref","_openBlock","_resolveDynamicComponent","_normalizeProps","_mergeProps","_createVNode","EpBtn","labelClose"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"EpHierarchy.vue2.js","sources":["../../../src/components/medias/EpHierarchy.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, onMounted, computed, defineAsyncComponent } from \"vue\";\nimport {\n hierarchy,\n tree,\n cluster,\n type HierarchyPointLink,\n type HierarchyPointNode,\n} from \"d3-hierarchy\";\nimport * as d3 from \"d3-selection\";\nimport { linkVertical, linkHorizontal } from \"d3-shape\";\nimport * as d3Zoom from \"d3-zoom\";\nimport type { TreeNode } from \"~/types/Hierarchy\";\nimport type { NestedComponents } from \"~/types/Component\";\nimport { useComponent } from \"~/composables/useComponent\";\nimport EpModal from \"~/components/interactions/EpModal.vue\";\nimport EpBtn from \"~/components/basics/EpBtn.vue\";\nimport { useRenderText } from \"~/composables/useRenderText\";\nimport type { EpHierarchyProps } from \"~/types/medias/EpHierarchy\";\n\nconst props = withDefaults(defineProps<EpHierarchyProps>(), {\n labelClose: \"fermer\",\n maxWidth: 800,\n maxHeight: 600,\n isCluster: false,\n colorRect: \"fill-red-400\",\n colorPath: \"stroke-yellow-400\",\n});\n\nconst treeContainer = ref<HTMLDivElement | null>(null);\nconst treeWrapper = ref<HTMLDivElement | null>(null);\n\n/* control modal */\ntype ShowNode = {\n title: string;\n text?: string;\n component?: NestedComponents;\n};\n\nconst currentNode = ref<ShowNode | null>(null);\nconst showModal = ref(false);\n\nconst handleNodeClick = (node: TreeNode) => {\n currentNode.value = {\n title: node.name,\n text: node.text,\n component: node.component,\n };\n showModal.value = true;\n};\n\nconst closeModal = () => {\n showModal.value = false;\n currentNode.value = null;\n};\n//nested component\n\nconst components = import.meta.glob([\n \"./*.vue\", // all components in medias (same folder)\n \"../basics/*.vue\", // components/charts/\n \"../signages/*.vue\", // components/signages/\n]);\n\nconst currentRenderComponent = computed(() => {\n if (!currentNode.value || !currentNode.value.component) {\n return null;\n }\n\n const { path, name } = useComponent(currentNode.value.component.type);\n //console.log(path, name)\n let fullPath = \"\";\n if (path === \"medias\") {\n fullPath = `./${name}.vue`;\n } else {\n fullPath = `../${path}/${name}.vue`;\n }\n //console.log(fullPath)\n const loader = components[fullPath] as\n | (() => Promise<{ default: NestedComponents }>)\n | undefined;\n\n if (!loader) {\n console.warn(`Component not found: ${fullPath}`);\n return null; // or defineAsyncComponent(() => import('../fallbacks/EpNothing.vue'))\n }\n\n return defineAsyncComponent(loader);\n});\n\nonMounted(() => {\n if (!treeContainer.value) return;\n\n if (props.isCluster) {\n clusterView();\n } else {\n treeView();\n }\n});\n\nconst treeView = () => {\n const rectW = 130;\n const rectH = 40;\n const margin = { top: 40, right: 40, bottom: 40, left: 40 };\n\n const root = hierarchy<TreeNode>(props.nodes);\n //const totalLeafCount = root.leaves().length\n const width = Math.max(props.maxWidth);\n const height = props.maxHeight;\n\n const treeLayout = tree<TreeNode>().nodeSize([200, 100]); // [x spacing, y spacing]\n\n const treeData = treeLayout(root);\n\n const svg = d3\n .select(treeContainer.value)\n .append(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n const g = svg\n .append(\"g\")\n .attr(\"transform\", `translate(${margin.left}, ${margin.top})`);\n\n const zoom = d3Zoom\n .zoom<SVGSVGElement, unknown>()\n .scaleExtent([0.1, 2])\n .on(\"zoom\", (event) => {\n g.attr(\"transform\", event.transform);\n });\n\n svg.call(zoom);\n\n const centerX = width / 2 - treeData.x;\n const centerY = 30; //height / 2 - treeData.y\n const identity = (d3Zoom as any).zoomIdentity;\n svg.call(zoom.transform, identity.translate(centerX, centerY));\n\n // Links\n const linkPath = linkVertical<\n HierarchyPointLink<TreeNode>,\n HierarchyPointNode<TreeNode>\n >()\n .x((d) => d.x)\n .y((d) => d.y);\n\n g.selectAll(\"path.link\")\n .data(treeData.links())\n .enter()\n .append(\"path\")\n .attr(\"d\", (d) => linkPath(d))\n .attr(\"class\", (d) => {\n const link = d.target.data.active\n ? `${props.colorPath} stroke-2`\n : \"stroke-black dark:stroke-white\";\n return `${link} link fill-none`;\n });\n\n // Nodes\n const node = g\n .selectAll(\"g.node\")\n .data(treeData.descendants())\n .enter()\n .append(\"g\")\n .attr(\"class\", \"node\")\n .attr(\"transform\", (d) => `translate(${d.x}, ${d.y})`)\n .style(\"cursor\", (d) =>\n d.data.component || d.data.text ? \"pointer\" : \"default\"\n )\n .each(function (d) {\n if (d.data.component || d.data.text) {\n d3.select(this).on(\"click\", (_event) => handleNodeClick(d.data));\n }\n });\n //.style('cursor', 'pointer')\n //.on('click', (_event, d) => handleNodeClick(d.data))\n\n node.each(function (d) {\n const group = d3.select(this);\n\n // Append text temporarily\n const text = group\n .append(\"text\")\n .attr(\"class\", \"text-sm font-semibold fill-black dark:fill-white\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"dy\", \".35em\")\n .text((d.data.label) ? d.data.label : d.data.name);\n\n // Get bounding box to determine text size\n const bbox = (text.node() as SVGTextElement).getBBox();\n const paddingX = 10;\n const paddingY = 10;\n\n const width = bbox.width + paddingX * 2;\n const height = bbox.height + paddingY * 2;\n\n // Draw rect using text size\n group\n .insert(\"rect\", \"text\")\n .attr(\"class\", props.colorRect)\n .attr(\"x\", -width / 2)\n .attr(\"y\", -height / 2)\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"rx\", 4)\n .attr(\"ry\", 4);\n });\n\n node\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"dy\", \".35em\")\n .attr(\"class\", \"text-sm font-semibold fill-white dark:fill-black\")\n .attr(\"text-anchor\", \"middle\")\n .text((d) => {return (d.data.label) ? d.data.label : d.data.name})\n .style(\"pointer-events\", \"none\");\n};\n\nconst clusterView = () => {\n const rectW = 130;\n const rectH = 40;\n const margin = { top: 40, right: 40, bottom: 40, left: 40 };\n\n const root = hierarchy<TreeNode>(props.nodes);\n //const totalLeafCount = root.leaves().length\n const width = Math.max(props.maxWidth);\n const height = props.maxHeight;\n\n const treeLayout = cluster<TreeNode>().nodeSize([130, 200]); // [x spacing, y spacing]\n\n const treeData = treeLayout(root);\n\n const svg = d3\n .select(treeContainer.value)\n .append(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n const g = svg\n .append(\"g\")\n .attr(\"transform\", `translate(${margin.left}, ${margin.top})`);\n\n const zoom = d3Zoom\n .zoom<SVGSVGElement, unknown>()\n .scaleExtent([0.1, 4])\n .on(\"zoom\", (event) => {\n g.attr(\"transform\", event.transform);\n });\n\n svg.call(zoom);\n\n const centerX = 30;\n const centerY = height / 2 - treeData.x;\n const identity = (d3Zoom as any).zoomIdentity;\n svg.call(zoom.transform, identity.translate(centerX, centerY));\n\n // Links\n const linkPath = linkHorizontal<\n HierarchyPointLink<TreeNode>,\n HierarchyPointNode<TreeNode>\n >()\n .x((d) => d.y)\n .y((d) => d.x);\n\n g.selectAll(\"path.link\")\n .data(treeData.links())\n .enter()\n .append(\"path\")\n .attr(\"d\", (d) => linkPath(d))\n .attr(\"class\", (d) => {\n const link = d.target.data.active\n ? `${props.colorPath} stroke-2`\n : \"stroke-black dark:stroke-white\";\n return `${link} link fill-none`;\n });\n\n // Nodes\n const node = g\n .selectAll(\"g.node\")\n .data(treeData.descendants())\n .enter()\n .append(\"g\")\n .attr(\"class\", \"node\")\n .attr(\"transform\", (d) => `translate(${d.y}, ${d.x})`)\n .style(\"cursor\", (d) =>\n d.data.component || d.data.text ? \"pointer\" : \"default\"\n )\n .each(function (d) {\n if (d.data.component || d.data.text) {\n d3.select(this).on(\"click\", (_event) => handleNodeClick(d.data));\n }\n });\n //.style('cursor', 'pointer')\n //.on('click', (_event, d) => handleNodeClick(d.data))\n\n node.each(function (d) {\n const group = d3.select(this);\n\n // Append text temporarily\n const text = group\n .append(\"text\")\n .attr(\"class\", \"text-sm font-semibold fill-black dark:fill-white\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"dy\", \".35em\")\n .text((d.data.label) ? d.data.label : d.data.name);\n\n // Get bounding box to determine text size\n const bbox = (text.node() as SVGTextElement).getBBox();\n const paddingX = 10;\n const paddingY = 10;\n\n const width = bbox.width + paddingX * 2;\n const height = bbox.height + paddingY * 2;\n\n // Draw rect using text size\n group\n .insert(\"rect\", \"text\")\n .attr(\"class\", props.colorRect)\n .attr(\"x\", -width / 2)\n .attr(\"y\", -height / 2)\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"rx\", 4)\n .attr(\"ry\", 4);\n });\n\n node\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"dy\", \".35em\")\n .attr(\"class\", \"text-sm font-semibold fill-white dark:fill-black\")\n .attr(\"text-anchor\", \"middle\")\n .text((d) => {return (d.data.label) ? d.data.label : d.data.name})\n .style(\"pointer-events\", \"none\");\n};\n\nconst maxW = computed(() => {\n return `${props.maxWidth.toString()}px`;\n});\n\nconst maxH = computed(() => {\n return `${props.maxWidth.toString()}px`;\n});\n</script>\n\n<template>\n <div>\n <div\n ref=\"treeWrapper\"\n class=\"ep-tree-wrapper mx-auto\"\n :style=\"{ maxHeight: maxH, maxWidth: maxW }\"\n >\n <div ref=\"treeContainer\" class=\"ep-tree-container\" />\n </div>\n <EpModal v-model=\"showModal\" :title=\"currentNode.title\" v-if=\"currentNode\">\n <div v-if=\"currentNode.text\" v-html=\"useRenderText(currentNode.text)\" />\n <template v-if=\"currentRenderComponent && currentNode.component\">\n <component\n :is=\"currentRenderComponent\"\n v-bind=\"{ ...currentNode.component.data }\"\n />\n </template>\n <div class=\"flex justify-end\">\n <EpBtn @click=\"closeModal\" type=\"error\" outlined rounded>{{\n labelClose\n }}</EpBtn>\n </div>\n </EpModal>\n </div>\n</template>\n\n<style scoped>\n.ep-tree-wrapper {\n overflow: auto;\n border: 1px solid #ddd;\n}\n\n.ep-tree-container {\n width: 100%;\n overflow-x: auto;\n}\n</style>\n"],"names":["width","height","_createElementBlock","_createElementVNode","_normalizeStyle","_createBlock","EpModal","_unref","_openBlock","_resolveDynamicComponent","_normalizeProps","_mergeProps","_createVNode","EpBtn","labelClose"],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import _sfc_main from "./AsyncKatexRender.vue2.js";
|
|
2
|
+
/* empty css */
|
|
3
|
+
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
|
|
4
|
+
const AsyncKatexRender = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0d66d7fc"]]);
|
|
5
|
+
export {
|
|
6
|
+
AsyncKatexRender as default
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=AsyncKatexRender.vue.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AsyncKatexRender.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { defineComponent, ref, createElementBlock, openBlock } from "vue";
|
|
2
|
+
const _hoisted_1 = ["innerHTML"];
|
|
3
|
+
const _hoisted_2 = ["innerHTML"];
|
|
4
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
5
|
+
__name: "AsyncKatexRender",
|
|
6
|
+
props: {
|
|
7
|
+
formula: {},
|
|
8
|
+
block: { type: Boolean }
|
|
9
|
+
},
|
|
10
|
+
setup(__props) {
|
|
11
|
+
const props = __props;
|
|
12
|
+
const renderedHtml = ref("...");
|
|
13
|
+
import("katex").then((katexModule) => {
|
|
14
|
+
renderedHtml.value = katexModule.default.renderToString(props.formula, {
|
|
15
|
+
throwOnError: false,
|
|
16
|
+
displayMode: false
|
|
17
|
+
});
|
|
18
|
+
}).catch((error) => {
|
|
19
|
+
console.error("Failed to load Katex library:", error);
|
|
20
|
+
renderedHtml.value = `<span style="color: red;">Il y a un error pour afficher la formule.</span>`;
|
|
21
|
+
});
|
|
22
|
+
return (_ctx, _cache) => {
|
|
23
|
+
return !_ctx.block ? (openBlock(), createElementBlock("span", {
|
|
24
|
+
key: 0,
|
|
25
|
+
class: "katex-render",
|
|
26
|
+
innerHTML: renderedHtml.value
|
|
27
|
+
}, null, 8, _hoisted_1)) : (openBlock(), createElementBlock("div", {
|
|
28
|
+
key: 1,
|
|
29
|
+
class: "katex-block text-center",
|
|
30
|
+
innerHTML: renderedHtml.value
|
|
31
|
+
}, null, 8, _hoisted_2));
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
export {
|
|
36
|
+
_sfc_main as default
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=AsyncKatexRender.vue2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AsyncKatexRender.vue2.js","sources":["../../../src/components/tools/AsyncKatexRender.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue';\n\nconst props = defineProps<{\n formula: string;\n block?:boolean;\n}>();\n\nconst renderedHtml = ref('...');\n\nimport('katex')\n .then((katexModule) => {\n renderedHtml.value = katexModule.default.renderToString(props.formula, {\n throwOnError: false,\n displayMode: false,\n });\n })\n .catch((error) => {\n console.error(\"Failed to load Katex library:\", error);\n renderedHtml.value = `<span style=\"color: red;\">Il y a un error pour afficher la formule.</span>`;\n });\n</script>\n\n<template>\n <span class=\"katex-render\" v-html=\"renderedHtml\" v-if=\"!block\"></span>\n <div v-else class=\"katex-block text-center\" v-html=\"renderedHtml\"></div>\n</template>\n\n<style scoped>\n/* Target the top-level KaTeX container and increase the font size */\n.katex-block :deep(.katex) {\n /* Increase the overall size of the math relative to the parent font size */\n font-size: 2em; \n}\n/* If you want inline math to be a specific size relative to surrounding text */\n.katex-render :deep(.katex-display) {\n font-size: 1.5em; \n}\n</style>"],"names":["block","_createElementBlock"],"mappings":";;;;;;;;;;AAGA,UAAM,QAAQ;AAKd,UAAM,eAAe,IAAI,KAAK;AAE9B,WAAO,OAAO,EACX,KAAK,CAAC,gBAAgB;AACrB,mBAAa,QAAQ,YAAY,QAAQ,eAAe,MAAM,SAAS;AAAA,QACrE,cAAc;AAAA,QACd,aAAa;AAAA,MAAA,CACd;AAAA,IACH,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,cAAQ,MAAM,iCAAiC,KAAK;AACpD,mBAAa,QAAQ;AAAA,IACvB,CAAC;;cAIuDA,KAAAA,sBAAxDC,mBAAsE,QAAA;AAAA;QAAhE,OAAM;AAAA,QAAe,WAAQ,aAAA;AAAA,MAAA,yCACnCA,mBAAwE,OAAA;AAAA;QAA5D,OAAM;AAAA,QAA0B,WAAQ,aAAA;AAAA,MAAA;;;;"}
|
|
@@ -1,4 +1,58 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { defineComponent, ref, createElementBlock, openBlock, createVNode, createElementVNode, withCtx, createTextVNode, toDisplayString } from "vue";
|
|
2
|
+
import _sfc_main$1 from "../interactions/EpModal.vue.js";
|
|
3
|
+
/* empty css */
|
|
4
|
+
import _sfc_main$4 from "../basics/EpBtn.vue.js";
|
|
5
|
+
import _sfc_main$3 from "../basics/EpDivider.vue.js";
|
|
6
|
+
import _sfc_main$2 from "./TextMedia.vue.js";
|
|
7
|
+
const _hoisted_1 = { class: "flex justify-end" };
|
|
8
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
9
|
+
__name: "Details",
|
|
10
|
+
props: {
|
|
11
|
+
title: { default: "Voir détails" },
|
|
12
|
+
content: {},
|
|
13
|
+
labelClose: { default: "Fermer" },
|
|
14
|
+
media: {}
|
|
15
|
+
},
|
|
16
|
+
setup(__props) {
|
|
17
|
+
const showModal = ref(false);
|
|
18
|
+
return (_ctx, _cache) => {
|
|
19
|
+
return openBlock(), createElementBlock("div", {
|
|
20
|
+
class: "cursor-pointer rounded bg-primary py-2 px-4 flex flex-col items-center",
|
|
21
|
+
onClick: _cache[2] || (_cache[2] = ($event) => showModal.value = true)
|
|
22
|
+
}, [
|
|
23
|
+
createVNode(_sfc_main$1, {
|
|
24
|
+
modelValue: showModal.value,
|
|
25
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showModal.value = $event),
|
|
26
|
+
title: _ctx.content
|
|
27
|
+
}, {
|
|
28
|
+
default: withCtx(() => [
|
|
29
|
+
createVNode(_sfc_main$2, {
|
|
30
|
+
text: _ctx.title,
|
|
31
|
+
media: _ctx.media,
|
|
32
|
+
"text-left": ""
|
|
33
|
+
}, null, 8, ["text", "media"]),
|
|
34
|
+
createVNode(_sfc_main$3),
|
|
35
|
+
createElementVNode("div", _hoisted_1, [
|
|
36
|
+
createVNode(_sfc_main$4, {
|
|
37
|
+
type: "error",
|
|
38
|
+
rounded: "",
|
|
39
|
+
size: "small",
|
|
40
|
+
onClick: _cache[0] || (_cache[0] = ($event) => showModal.value = false)
|
|
41
|
+
}, {
|
|
42
|
+
default: withCtx(() => [
|
|
43
|
+
createTextVNode(toDisplayString(_ctx.labelClose), 1)
|
|
44
|
+
]),
|
|
45
|
+
_: 1
|
|
46
|
+
})
|
|
47
|
+
])
|
|
48
|
+
]),
|
|
49
|
+
_: 1
|
|
50
|
+
}, 8, ["modelValue", "title"]),
|
|
51
|
+
createElementVNode("p", null, toDisplayString(_ctx.title), 1)
|
|
52
|
+
]);
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
});
|
|
2
56
|
export {
|
|
3
57
|
_sfc_main as default
|
|
4
58
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Details.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
1
|
+
{"version":3,"file":"Details.vue.js","sources":["../../../src/components/tools/Details.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EpModal from \"~/components/interactions/EpModal.vue\";\nimport type { NestedComponents } from \"~/types/Component\";\nimport EpBtn from \"~/components/basics/EpBtn.vue\";\nimport EpDivider from \"~/components/basics/EpDivider.vue\";\nimport TextMedia from \"./TextMedia.vue\";\nconst showModal = ref(false);\n\ninterface Props {\n title?: string;\n content: string;\n labelClose?: string;\n media?: NestedComponents;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n title: \"Voir détails\",\n labelClose: \"Fermer\",\n});\n</script>\n\n<template>\n <div\n class=\"cursor-pointer rounded bg-primary py-2 px-4 flex flex-col items-center\"\n @click=\"showModal = true\"\n >\n <EpModal v-model=\"showModal\" :title=\"content\">\n <TextMedia :text=\"title\" :media=\"media\" text-left />\n <EpDivider />\n <div class=\"flex justify-end\">\n <EpBtn type=\"error\" rounded size=\"small\" @click=\"showModal = false\">\n {{ labelClose }}\n </EpBtn>\n </div>\n </EpModal>\n <p>{{ title }}</p>\n </div>\n</template>\n"],"names":["_createElementBlock","_createVNode","EpModal","content","TextMedia","title","media","EpDivider","_createElementVNode","EpBtn","labelClose"],"mappings":";;;;;;;;;;;;;;;;AAOA,UAAM,YAAY,IAAI,KAAK;;0BAgBzBA,mBAcM,OAAA;AAAA,QAbJ,OAAM;AAAA,QACL,+CAAO,UAAA,QAAS;AAAA,MAAA;QAEjBC,YAQUC,aAAA;AAAA,sBARQ,UAAA;AAAA,uEAAA,UAAS,QAAA;AAAA,UAAG,OAAOC,KAAAA;AAAAA,QAAAA;2BACnC,MAAoD;AAAA,YAApDF,YAAoDG,aAAA;AAAA,cAAxC,MAAMC,KAAAA;AAAAA,cAAQ,OAAOC,KAAAA;AAAAA,cAAO,aAAA;AAAA,YAAA;YACxCL,YAAaM,WAAA;AAAA,YACbC,mBAIM,OAJN,YAIM;AAAA,cAHJP,YAEQQ,aAAA;AAAA,gBAFD,MAAK;AAAA,gBAAQ,SAAA;AAAA,gBAAQ,MAAK;AAAA,gBAAS,+CAAO,UAAA,QAAS;AAAA,cAAA;iCACxD,MAAgB;AAAA,kDAAbC,KAAAA,UAAU,GAAA,CAAA;AAAA,gBAAA;;;;;;;QAInBF,mBAAkB,2BAAZH,KAAAA,KAAK,GAAA,CAAA;AAAA,MAAA;;;;"}
|
|
@@ -1,58 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import _sfc_main$1 from "../interactions/EpModal.vue.js";
|
|
3
|
-
/* empty css */
|
|
4
|
-
import _sfc_main$4 from "../basics/EpBtn.vue.js";
|
|
5
|
-
import _sfc_main$3 from "../basics/EpDivider.vue.js";
|
|
6
|
-
import _sfc_main$2 from "./TextMedia.vue2.js";
|
|
7
|
-
const _hoisted_1 = { class: "flex justify-end" };
|
|
8
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
9
|
-
__name: "Details",
|
|
10
|
-
props: {
|
|
11
|
-
title: { default: "Voir détails" },
|
|
12
|
-
content: {},
|
|
13
|
-
labelClose: { default: "Fermer" },
|
|
14
|
-
media: {}
|
|
15
|
-
},
|
|
16
|
-
setup(__props) {
|
|
17
|
-
const showModal = ref(false);
|
|
18
|
-
return (_ctx, _cache) => {
|
|
19
|
-
return openBlock(), createElementBlock("div", {
|
|
20
|
-
class: "cursor-pointer rounded bg-primary py-2 px-4 flex flex-col items-center",
|
|
21
|
-
onClick: _cache[2] || (_cache[2] = ($event) => showModal.value = true)
|
|
22
|
-
}, [
|
|
23
|
-
createVNode(_sfc_main$1, {
|
|
24
|
-
modelValue: showModal.value,
|
|
25
|
-
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showModal.value = $event),
|
|
26
|
-
title: _ctx.content
|
|
27
|
-
}, {
|
|
28
|
-
default: withCtx(() => [
|
|
29
|
-
createVNode(_sfc_main$2, {
|
|
30
|
-
text: _ctx.title,
|
|
31
|
-
media: _ctx.media,
|
|
32
|
-
"text-left": ""
|
|
33
|
-
}, null, 8, ["text", "media"]),
|
|
34
|
-
createVNode(_sfc_main$3),
|
|
35
|
-
createElementVNode("div", _hoisted_1, [
|
|
36
|
-
createVNode(_sfc_main$4, {
|
|
37
|
-
type: "error",
|
|
38
|
-
rounded: "",
|
|
39
|
-
size: "small",
|
|
40
|
-
onClick: _cache[0] || (_cache[0] = ($event) => showModal.value = false)
|
|
41
|
-
}, {
|
|
42
|
-
default: withCtx(() => [
|
|
43
|
-
createTextVNode(toDisplayString(_ctx.labelClose), 1)
|
|
44
|
-
]),
|
|
45
|
-
_: 1
|
|
46
|
-
})
|
|
47
|
-
])
|
|
48
|
-
]),
|
|
49
|
-
_: 1
|
|
50
|
-
}, 8, ["modelValue", "title"]),
|
|
51
|
-
createElementVNode("p", null, toDisplayString(_ctx.title), 1)
|
|
52
|
-
]);
|
|
53
|
-
};
|
|
54
|
-
}
|
|
55
|
-
});
|
|
1
|
+
import _sfc_main from "./Details.vue.js";
|
|
56
2
|
export {
|
|
57
3
|
_sfc_main as default
|
|
58
4
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Details.vue2.js","sources":[
|
|
1
|
+
{"version":3,"file":"Details.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1,4 +1,53 @@
|
|
|
1
|
-
import
|
|
1
|
+
import __variableDynamicImportRuntimeHelper from "../../_virtual/dynamic-import-helper.js";
|
|
2
|
+
import { defineComponent, computed, defineAsyncComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, unref, createBlock, resolveDynamicComponent, normalizeProps, guardReactiveProps } from "vue";
|
|
3
|
+
import { useRenderText } from "../../composables/useRenderText.js";
|
|
4
|
+
import { useComponent } from "../../composables/useComponent.js";
|
|
5
|
+
const _hoisted_1 = ["innerHTML"];
|
|
6
|
+
const _hoisted_2 = {
|
|
7
|
+
key: 0,
|
|
8
|
+
class: "w-full"
|
|
9
|
+
};
|
|
10
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
11
|
+
__name: "TextMedia",
|
|
12
|
+
props: {
|
|
13
|
+
media: {},
|
|
14
|
+
flexCol: { type: Boolean, default: false },
|
|
15
|
+
text: {},
|
|
16
|
+
cols: { type: Boolean },
|
|
17
|
+
textLeft: { type: Boolean }
|
|
18
|
+
},
|
|
19
|
+
setup(__props) {
|
|
20
|
+
const props = __props;
|
|
21
|
+
const currentRenderComponent = computed(() => {
|
|
22
|
+
if (props.media) {
|
|
23
|
+
const componentToLoad = useComponent(props.media.type);
|
|
24
|
+
return defineAsyncComponent(
|
|
25
|
+
() => __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../basics/EpAvatar.vue": () => import("../basics/EpAvatar.vue2.js"), "../basics/EpBadge.vue": () => import("../basics/EpBadge.vue.js"), "../basics/EpBtn.vue": () => import("../basics/EpBtn.vue2.js"), "../basics/EpCard.vue": () => import("../basics/EpCard.vue2.js"), "../basics/EpChip.vue": () => import("../basics/EpChip.vue2.js"), "../basics/EpDivider.vue": () => import("../basics/EpDivider.vue2.js"), "../basics/EpFlex.vue": () => import("../basics/EpFlex.vue2.js"), "../basics/EpHover.vue": () => import("../basics/EpHover.vue2.js"), "../basics/EpHoverCard.vue": () => import("../basics/EpHoverCard.vue2.js"), "../basics/EpIcon.vue": () => import("../basics/EpIcon.vue2.js"), "../basics/EpImg.vue": () => import("../basics/EpImg.vue2.js"), "../basics/EpImgCarousel.vue": () => import("../basics/EpImgCarousel.vue2.js"), "../basics/EpList.vue": () => import("../basics/EpList.vue.js"), "../basics/EpListItem.vue": () => import("../basics/EpListItem.vue2.js"), "../basics/EpSection.vue": () => import("../basics/EpSection.vue2.js"), "../basics/EpSectionCols.vue": () => import("../basics/EpSectionCols.vue2.js"), "../basics/EpSpinner.vue": () => import("../basics/EpSpinner.vue2.js"), "../basics/EpStackedList.vue": () => import("../basics/EpStackedList.vue2.js"), "../basics/EpTable.vue": () => import("../basics/EpTable.vue2.js"), "../basics/EpText.vue": () => import("../basics/EpText.vue2.js"), "../charts/EpBarChart.vue": () => import("../charts/EpBarChart.vue2.js"), "../charts/EpFunnelChart.vue": () => import("../charts/EpFunnelChart.vue2.js"), "../charts/EpLineChart.vue": () => import("../charts/EpLineChart.vue2.js"), "../charts/EpPieChart.vue": () => import("../charts/EpPieChart.vue2.js"), "../educationals/EpBranchingScenario.vue": () => import("../educationals/EpBranchingScenario.vue.js"), "../educationals/EpCodeblock.vue": () => import("../educationals/EpCodeblock.vue3.js"), "../educationals/EpConclusion.vue": () => import("../educationals/EpConclusion.vue2.js"), "../educationals/EpDescription.vue": () => import("../educationals/EpDescription.vue2.js"), "../educationals/EpDocument.vue": () => import("../educationals/EpDocument.vue2.js"), "../educationals/EpEdu.vue": () => import("../educationals/EpEdu.vue2.js"), "../educationals/EpInstructions.vue": () => import("../educationals/EpInstructions.vue2.js"), "../educationals/EpIntroduction.vue": () => import("../educationals/EpIntroduction.vue2.js"), "../educationals/EpObjective.vue": () => import("../educationals/EpObjective.vue2.js"), "../educationals/EpReading.vue": () => import("../educationals/EpReading.vue2.js"), "../educationals/EpResource.vue": () => import("../educationals/EpResource.vue2.js"), "../educationals/EpScope.vue": () => import("../educationals/EpScope.vue2.js"), "../educationals/EpSpecificObjective.vue": () => import("../educationals/EpSpecificObjective.vue2.js"), "../forms/EpCheckbox.vue": () => import("../forms/EpCheckbox.vue.js"), "../forms/EpInput.vue": () => import("../forms/EpInput.vue.js"), "../forms/EpRadio.vue": () => import("../forms/EpRadio.vue.js"), "../forms/EpRadioSummative.vue": () => import("../forms/EpRadioSummative.vue.js"), "../forms/EpSelect.vue": () => import("../forms/EpSelect.vue.js"), "../forms/EpSwitch.vue": () => import("../forms/EpSwitch.vue.js"), "../forms/EpTextarea.vue": () => import("../forms/EpTextarea.vue.js"), "../forms/EpToggle.vue": () => import("../forms/EpToggle.vue.js"), "../interactions/Ep360Image.vue": () => import("../interactions/Ep360Image.vue.js"), "../interactions/Ep360Video.vue": () => import("../interactions/Ep360Video.vue.js"), "../interactions/EpAccordeon.vue": () => import("../interactions/EpAccordeon.vue.js"), "../interactions/EpContentSlider.vue": () => import("../interactions/EpContentSlider.vue2.js"), "../interactions/EpDarkMode.vue": () => import("../interactions/EpDarkMode.vue2.js"), "../interactions/EpDraggable.vue": () => import("../interactions/EpDraggable.vue2.js"), "../interactions/EpFlipCard.vue": () => import("../interactions/EpFlipCard.vue.js"), "../interactions/EpHotSpot.vue": () => import("../interactions/EpHotSpot.vue2.js"), "../interactions/EpModal.vue": () => import("../interactions/EpModal.vue3.js"), "../interactions/EpQuestion.vue": () => import("../interactions/EpQuestion.vue2.js"), "../interactions/EpSummativeTable.vue": () => import("../interactions/EpSummativeTable.vue2.js"), "../interactions/EpSvgShow.vue": () => import("../interactions/EpSvgShow.vue2.js"), "../interactions/EpTabs.vue": () => import("../interactions/EpTabs.vue.js"), "../interactions/EpTooltip.vue": () => import("../interactions/EpTooltip.vue2.js"), "../medias/EpAudio.vue": () => import("../medias/EpAudio.vue2.js"), "../medias/EpCardLink.vue": () => import("../medias/EpCardLink.vue2.js"), "../medias/EpCarousel.vue": () => import("../medias/EpCarousel.vue2.js"), "../medias/EpHierarchy.vue": () => import("../medias/EpHierarchy.vue.js"), "../medias/EpIframe.vue": () => import("../medias/EpIframe.vue2.js"), "../medias/EpKatex.vue": () => import("../medias/EpKatex.vue.js"), "../medias/EpLink.vue": () => import("../medias/EpLink.vue2.js"), "../medias/EpLinkVersion.vue": () => import("../medias/EpLinkVersion.vue2.js"), "../medias/EpLottieSvg.vue": () => import("../medias/EpLottieSvg.vue2.js"), "../medias/EpSensibleImage.vue": () => import("../medias/EpSensibleImage.vue.js"), "../medias/EpSoftware.vue": () => import("../medias/EpSoftware.vue2.js"), "../medias/EpSvg.vue": () => import("../medias/EpSvg.vue2.js"), "../medias/EpTerm.vue": () => import("../medias/EpTerm.vue2.js"), "../medias/EpTimeLine.vue": () => import("../medias/EpTimeLine.vue.js"), "../medias/EpVideo.vue": () => import("../medias/EpVideo.vue2.js"), "../medias/EpVideoPanopto.vue": () => import("../medias/EpVideoPanopto.vue2.js"), "../medias/EpWordDef.vue": () => import("../medias/EpWordDef.vue2.js"), "../signages/EpAlert.vue": () => import("../signages/EpAlert.vue.js"), "../signages/EpBadge.vue": () => import("../signages/EpBadge.vue2.js"), "../signages/EpHeader.vue": () => import("../signages/EpHeader.vue2.js"), "../signages/EpNothing.vue": () => import("../signages/EpNothing.vue.js"), "../signages/EpQuote.vue": () => import("../signages/EpQuote.vue2.js"), "../signages/EpSkeleton.vue": () => import("../signages/EpSkeleton.vue.js"), "./AsyncKatexRender.vue": () => import("./AsyncKatexRender.vue.js"), "./BgAudio.vue": () => import("./BgAudio.vue.js"), "./Details.vue": () => import("./Details.vue2.js"), "./DisplayBox.vue": () => import("./DisplayBox.vue.js"), "./SvgFilter.vue": () => import("./SvgFilter.vue.js"), "./TextMedia.vue": () => import("./TextMedia.vue2.js"), "./TimelineItem.vue": () => import("./TimelineItem.vue.js"), "./TwoColsMedia.vue": () => import("./TwoColsMedia.vue.js") }), `../${componentToLoad.path}/${componentToLoad.name}.vue`, 3)
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
return null;
|
|
29
|
+
});
|
|
30
|
+
const colsStyle = computed(() => {
|
|
31
|
+
return props.cols ? "flex items-center justify-center gap-1" : "";
|
|
32
|
+
});
|
|
33
|
+
const alignText = computed(() => {
|
|
34
|
+
return props.textLeft ? "" : "justify-center";
|
|
35
|
+
});
|
|
36
|
+
return (_ctx, _cache) => {
|
|
37
|
+
return openBlock(), createElementBlock("div", {
|
|
38
|
+
class: normalizeClass(colsStyle.value)
|
|
39
|
+
}, [
|
|
40
|
+
createElementVNode("div", {
|
|
41
|
+
class: normalizeClass(`w-full flex items-center ${_ctx.flexCol ? "flex-col" : ""} ${alignText.value}`),
|
|
42
|
+
innerHTML: unref(useRenderText)(_ctx.text)
|
|
43
|
+
}, null, 10, _hoisted_1),
|
|
44
|
+
currentRenderComponent.value && _ctx.media ? (openBlock(), createElementBlock("div", _hoisted_2, [
|
|
45
|
+
(openBlock(), createBlock(resolveDynamicComponent(currentRenderComponent.value), normalizeProps(guardReactiveProps({ ..._ctx.media.data, card: true })), null, 16))
|
|
46
|
+
])) : createCommentVNode("", true)
|
|
47
|
+
], 2);
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
});
|
|
2
51
|
export {
|
|
3
52
|
_sfc_main as default
|
|
4
53
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextMedia.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
1
|
+
{"version":3,"file":"TextMedia.vue.js","sources":["../../../src/components/tools/TextMedia.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, defineAsyncComponent } from \"vue\";\nimport { useRenderText } from \"~/composables/useRenderText\";\nimport { useComponent } from \"~/composables/useComponent\";\nimport type { NestedComponents } from \"~/types/Component\";\n\ninterface Props {\n media?: NestedComponents;\n flexCol?: boolean;\n text: string;\n cols?: boolean;\n textLeft?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n flexCol: false\n});\n\nconst currentRenderComponent = computed(() => {\n if (props.media) {\n const componentToLoad = useComponent(props.media.type);\n return defineAsyncComponent(\n () => import(`../${componentToLoad.path}/${componentToLoad.name}.vue`)\n );\n }\n return null;\n});\n\nconst colsStyle = computed(() => {\n return props.cols ? \"flex items-center justify-center gap-1\" : \"\";\n});\n\nconst alignText = computed(() => {\n return props.textLeft ? \"\" : \"justify-center\";\n});\n</script>\n\n<template>\n <div :class=\"colsStyle\">\n <div :class=\"`w-full flex items-center ${(flexCol ? 'flex-col' : '')} ${alignText}`\" v-html=\"useRenderText(text)\" />\n <div class=\"w-full\" v-if=\"currentRenderComponent && media\">\n <component :is=\"currentRenderComponent\" v-bind=\"{ ...media.data, card:true }\" />\n </div>\n </div>\n</template>\n"],"names":["_createElementBlock","_createElementVNode","_normalizeClass","flexCol","_unref","text","media","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps"],"mappings":"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"}
|