ep-lib-ts 1.0.50 → 1.0.52
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-B0h7VdWq.js +4 -0
- package/dist/Details-DZKLvF9v.js +4 -0
- package/dist/DisplayBox-DDLKnmKJ.js +4 -0
- package/dist/EpAlert-BjUplxWX.js +4 -0
- package/dist/EpAudio-CATD1Jbh.js +4 -0
- package/dist/EpAvatar-Dfsz07bn.js +4 -0
- package/dist/EpBadge-Dvu88JNL.js +4 -0
- package/dist/EpBarChart-Cl_SiAvN.js +4 -0
- package/dist/EpBtn-HearU7fk.js +4 -0
- package/dist/EpCard-DaEFsYjJ.js +4 -0
- package/dist/EpCardLink-B7-e3xGJ.js +4 -0
- package/dist/EpChip-B3Dl3sbg.js +4 -0
- package/dist/EpCodeblock-DhPVKsZw.js +4 -0
- package/dist/EpConclusion-DaQXAgp_.js +4 -0
- package/dist/EpContentSlider-MgPnsxoZ.js +4 -0
- package/dist/{EpDarkmode-CGgVbwTf.js → EpDarkmode-BmcA1kre.js} +1 -1
- package/dist/EpDescription-DWXlwJEL.js +4 -0
- package/dist/EpDivider-BmUwghGw.js +4 -0
- package/dist/EpDocument-Bh7tx9Z3.js +4 -0
- package/dist/{EpDraggable-BonwHvwO.js → EpDraggable-CEqhDHAq.js} +1 -1
- package/dist/EpEdu-CTUhM5xY.js +4 -0
- package/dist/EpFlex-bvQbwBqj.js +4 -0
- package/dist/EpFunnelChart-D57Qx8Ns.js +4 -0
- package/dist/EpHeader-BeNQdrDL.js +4 -0
- package/dist/EpHover-C6xm5kes.js +4 -0
- package/dist/EpHoverCard-D27lS9Lu.js +4 -0
- package/dist/EpIcon-DYyh_r_t.js +4 -0
- package/dist/EpIframe-DbHttqXB.js +4 -0
- package/dist/EpImg-DsXQcvsP.js +4 -0
- package/dist/EpImgCarousel-CCOYX3Sf.js +4 -0
- package/dist/{EpInput-nIcyx2pC.js → EpInput-B2O5ovqX.js} +1 -1
- package/dist/EpInstructions-UzKvuasV.js +4 -0
- package/dist/EpIntroduction-DMSd580N.js +4 -0
- package/dist/EpLineChart-vIg84kEL.js +4 -0
- package/dist/EpLink-ByyNViWv.js +4 -0
- package/dist/EpLinkVersion-CcG0KUCD.js +4 -0
- package/dist/{EpList-DTn92hAt.js → EpList-BQQ6YyEU.js} +1 -1
- package/dist/EpModal-C3eAYkVv.js +4 -0
- package/dist/{EpNothing-Dg2YUQkw.js → EpNothing-D53i__PJ.js} +1 -1
- package/dist/EpObjective-B1T5_B94.js +4 -0
- package/dist/EpPieChart-BLup5pM9.js +4 -0
- package/dist/EpQuestion-BMmO301I.js +4 -0
- package/dist/EpQuote-BA8jGdmn.js +4 -0
- package/dist/EpRadio-BHQ8QDek.js +4 -0
- package/dist/EpRadioSummative-BSSwzhJH.js +4 -0
- package/dist/EpReading-pRs9Mtww.js +4 -0
- package/dist/EpResource-DVUh5ZLE.js +4 -0
- package/dist/EpScope-DlbXKFok.js +4 -0
- package/dist/EpSection-CI_u2BBY.js +4 -0
- package/dist/EpSectionCols-CpHJ4ZqV.js +4 -0
- package/dist/EpSkeleton-CneeChkb.js +4 -0
- package/dist/EpSoftware-wMOFrTQs.js +4 -0
- package/dist/EpSpecificObjective-D3-nfcdE.js +4 -0
- package/dist/EpSpinner-DHmfsvnE.js +4 -0
- package/dist/EpStackedList-DbQ_vuea.js +4 -0
- package/dist/EpSummativeTable-DlEEGid2.js +4 -0
- package/dist/EpSvg-N-aSiFRB.js +4 -0
- package/dist/EpSvgShow-DrenPNTe.js +4 -0
- package/dist/EpTable-CqM-ocWg.js +4 -0
- package/dist/EpTerm-D9ba8WkL.js +4 -0
- package/dist/EpText-BWLZ6D8r.js +4 -0
- package/dist/EpTimeLine-CXmdGtrb.js +4 -0
- package/dist/EpVideo-Blqwux-i.js +4 -0
- package/dist/EpVideoPanopto-DlHfv8Gm.js +4 -0
- package/dist/EpWordDef-Dbw7-k75.js +4 -0
- package/dist/TextMedia-D5hYAp0w.js +4 -0
- package/dist/components/educationals/EpBranchingScenario.vue.d.ts +3 -13
- package/dist/components/tools/TextMedia.vue.d.ts +2 -0
- package/dist/ep-lib-ts.js +1 -1
- package/dist/ep-lib-ts.umd.cjs +170 -170
- package/dist/{index-0vB69UCj.js → index-C4wT5qUE.js} +1 -1
- package/dist/{index-DLv4mjKM.js → index-CxWafW_X.js} +2000 -1986
- package/dist/{prism-6W4dR8A-.js → prism-CgWkMycv.js} +1 -1
- package/dist/style.css +1 -1
- package/dist/types/Component.d.ts +1 -0
- package/dist/types/Hierarchy.d.ts +2 -1
- package/package.json +1 -1
- package/src/components/basics/EpCard.vue +2 -2
- package/src/components/educationals/EpBranchingScenario.vue +43 -62
- package/src/components/educationals/EpDocument.vue +1 -1
- package/src/components/forms/EpSwitch.vue +0 -1
- package/src/components/medias/EpHierarchy.vue +2 -2
- package/src/components/tools/Details.vue +1 -0
- package/src/components/tools/TextMedia.vue +12 -2
- package/dist/BgAudio-BcFqGqtU.js +0 -4
- package/dist/Details-CIvWkwkL.js +0 -4
- package/dist/DisplayBox-CEcrSGuz.js +0 -4
- package/dist/EpAlert-ekJFjrKE.js +0 -4
- package/dist/EpAudio-CYtAp4vr.js +0 -4
- package/dist/EpAvatar-I6vMqpae.js +0 -4
- package/dist/EpBadge-CXE6l-qw.js +0 -4
- package/dist/EpBarChart-BwYJfBv3.js +0 -4
- package/dist/EpBtn-CGPT0t1x.js +0 -4
- package/dist/EpCard-BAL0h269.js +0 -4
- package/dist/EpCardLink-b8hhgrUR.js +0 -4
- package/dist/EpChip-DbfJF4Xn.js +0 -4
- package/dist/EpCodeblock-CBj8Oacf.js +0 -4
- package/dist/EpConclusion-DffcCS5s.js +0 -4
- package/dist/EpContentSlider-DaqabBm_.js +0 -4
- package/dist/EpDescription-BqHLNXp7.js +0 -4
- package/dist/EpDivider-DBxMnU3f.js +0 -4
- package/dist/EpDocument-ZcGgjOAh.js +0 -4
- package/dist/EpEdu-BeLnkTN_.js +0 -4
- package/dist/EpFlex-KZeENbBn.js +0 -4
- package/dist/EpFunnelChart-BWj5cXjn.js +0 -4
- package/dist/EpHeader-YlRsCwDV.js +0 -4
- package/dist/EpHover-B7j4upQo.js +0 -4
- package/dist/EpHoverCard-Dw4D1Chz.js +0 -4
- package/dist/EpIcon-gsCiTrHT.js +0 -4
- package/dist/EpIframe-CEtKFm2f.js +0 -4
- package/dist/EpImg-CnaFpZFC.js +0 -4
- package/dist/EpImgCarousel-BXDxCRpJ.js +0 -4
- package/dist/EpInstructions-CzXHOnBs.js +0 -4
- package/dist/EpIntroduction-BeWOqC7G.js +0 -4
- package/dist/EpLineChart-DsTQ3hJc.js +0 -4
- package/dist/EpLink-BvPRyfm0.js +0 -4
- package/dist/EpLinkVersion-BX85xOiK.js +0 -4
- package/dist/EpModal-6PIkNrq4.js +0 -4
- package/dist/EpObjective-AB4lqQvE.js +0 -4
- package/dist/EpPieChart-B28rhPkR.js +0 -4
- package/dist/EpQuestion-CMiFDUEA.js +0 -4
- package/dist/EpQuote-BVUoMSCm.js +0 -4
- package/dist/EpRadio-CiyUJGfK.js +0 -4
- package/dist/EpRadioSummative-BIH0Gvzc.js +0 -4
- package/dist/EpReading-DQRx5bVw.js +0 -4
- package/dist/EpResource-dB2HSfCL.js +0 -4
- package/dist/EpScope-Bd8iU__N.js +0 -4
- package/dist/EpSection-D-gdCenC.js +0 -4
- package/dist/EpSectionCols-BiUWS3dK.js +0 -4
- package/dist/EpSkeleton-CFkomMuY.js +0 -4
- package/dist/EpSoftware-Aamv74mm.js +0 -4
- package/dist/EpSpecificObjective-DA32ZoFL.js +0 -4
- package/dist/EpSpinner-BAKZ17aN.js +0 -4
- package/dist/EpStackedList-D2-RpdUe.js +0 -4
- package/dist/EpSummativeTable-BfxiKjX2.js +0 -4
- package/dist/EpSvg-DDr7pd6Y.js +0 -4
- package/dist/EpSvgShow-Cg_E54ho.js +0 -4
- package/dist/EpTable-pJWqDyoC.js +0 -4
- package/dist/EpTerm-QBcZje7U.js +0 -4
- package/dist/EpText-Bq5OrV3Z.js +0 -4
- package/dist/EpTimeLine-7LN-NyXU.js +0 -4
- package/dist/EpVideo-KC7b4d-T.js +0 -4
- package/dist/EpVideoPanopto-DpuTCKoL.js +0 -4
- package/dist/EpWordDef-hJ6pbOSX.js +0 -4
- package/dist/TextMedia-B5jsErAT.js +0 -4
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.content[data-v-3a321611]{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}pre{white-space:break-spaces}.tree-wrapper[data-v-
|
|
1
|
+
.content[data-v-3a321611]{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}pre{white-space:break-spaces}.tree-wrapper[data-v-633f0b83]{overflow:auto;border:1px solid #ddd}.tree-container[data-v-633f0b83]{width:100%;overflow-x:auto}@keyframes fade-eb43e961{0%{opacity:0}to{opacity:1}}@keyframes scale-eb43e961{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideY-eb43e961{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.fade[data-v-eb43e961]{animation:fade-eb43e961 1s}.scale[data-v-eb43e961]{animation:scale-eb43e961 1s}.slideY[data-v-eb43e961]{animation:slideY-eb43e961 1s}.shape{height:var(--57a4c52c);width:var(--32b5e5ba)}.v-enter-active[data-v-7e484601],.v-leave-active[data-v-7e484601]{transition:opacity .5s ease}.v-enter-from[data-v-7e484601],.v-leave-to[data-v-7e484601]{opacity:0}.katex[data-v-a5d595cd]{font-size:1.6em}.content[data-v-1ad88e28]{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)}.arrow-light-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,.2) transparent transparent transparent}.arrow-dark-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:black transparent transparent transparent}.arrow-light-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid #eee;border-left:7px solid transparent;border-bottom-color:#0003}.arrow-dark-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid black;border-left:7px solid transparent;border-bottom-color:black transparent transparent transparent}.arrow-light-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid #eee;border-bottom:5px solid transparent;border-left-color:#0003}.arrow-dark-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid black;border-bottom:5px solid transparent;border-left-color:black transparent transparent transparent}.arrow-light-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid #eee;border-bottom:5px solid transparent;border-right-color:#0003}.arrow-dark-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid black;border-bottom:5px solid transparent;border-right-color:black transparent transparent transparent}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { NestedComponents } from './Component';
|
|
2
2
|
|
|
3
3
|
export interface TreeNode {
|
|
4
|
-
|
|
4
|
+
id?: string;
|
|
5
5
|
name: string;
|
|
6
6
|
children?: TreeNode[];
|
|
7
7
|
active?: boolean;
|
|
8
8
|
text?: string;
|
|
9
9
|
component?: NestedComponents;
|
|
10
|
+
cols?: boolean;
|
|
10
11
|
}
|
|
11
12
|
type TailwindShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
|
|
12
13
|
type TailwindColor = 'main-color' | 'primary' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose';
|
package/package.json
CHANGED
|
@@ -101,7 +101,7 @@ const hasContent = computed(() => {
|
|
|
101
101
|
<template>
|
|
102
102
|
<div :class="`${stylesCard} ${isLinkStyle}`">
|
|
103
103
|
<img v-if="src" :src="src" :class="`w-full ${hasContent ? 'rounded-t-md':'rounded-md'}`" alt="header card">
|
|
104
|
-
<div v-if="!src && svg" class="w-full rounded-t-md">
|
|
104
|
+
<div v-if="!src && svg" class="w-full rounded-t-md dark:text-white">
|
|
105
105
|
<EpSvg :content="svg"/>
|
|
106
106
|
</div>
|
|
107
107
|
|
|
@@ -112,7 +112,7 @@ const hasContent = computed(() => {
|
|
|
112
112
|
<h4 :class="`text-xs dark:text-white ${subTitleText}`">{{ subtitle }}</h4>
|
|
113
113
|
</div>
|
|
114
114
|
<div v-if="icon">
|
|
115
|
-
<EpIcon :icon-path="icon"></EpIcon>
|
|
115
|
+
<EpIcon :icon-path="icon" extra-class="dark:text-white"></EpIcon>
|
|
116
116
|
</div>
|
|
117
117
|
</div>
|
|
118
118
|
<slot name="card-header"></slot>
|
|
@@ -13,28 +13,14 @@ import { mdiArrowLeft } from "@mdi/js";
|
|
|
13
13
|
import TextMedia from "../tools/TextMedia.vue";
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
// Defining the props
|
|
17
|
-
|
|
18
|
-
interface Option {
|
|
19
|
-
name: string;
|
|
20
|
-
question: string;
|
|
21
|
-
media?:NestedComponents;
|
|
22
|
-
options?: Option[];
|
|
23
|
-
}
|
|
24
|
-
|
|
25
16
|
interface Props {
|
|
26
17
|
title: string;
|
|
27
18
|
media?:NestedComponents;
|
|
28
19
|
initialInstruction?: string | null;
|
|
20
|
+
initialTwoCols?:boolean;
|
|
29
21
|
generalFeedback?: string;
|
|
30
22
|
bgColor?: string;
|
|
31
|
-
|
|
32
|
-
decisionTree: {
|
|
33
|
-
name: string;
|
|
34
|
-
question:string;
|
|
35
|
-
media?: NestedComponents;
|
|
36
|
-
options?: Option[];
|
|
37
|
-
};
|
|
23
|
+
decisionTree: TreeNode
|
|
38
24
|
transitionAnimation?: "fade" | "scale" | "slideY";
|
|
39
25
|
labelStart?:string;
|
|
40
26
|
labelFinish?:string;
|
|
@@ -62,9 +48,9 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
62
48
|
|
|
63
49
|
|
|
64
50
|
const showPath = ref(false)
|
|
65
|
-
const path = ref<
|
|
51
|
+
const path = ref<TreeNode[]>([])
|
|
66
52
|
const userPath = ref<TreeNode|null>(null)
|
|
67
|
-
const currentOption = ref<
|
|
53
|
+
const currentOption = ref<TreeNode | null>(null);
|
|
68
54
|
|
|
69
55
|
|
|
70
56
|
// Manage the introductory part
|
|
@@ -75,6 +61,18 @@ const start = () => {
|
|
|
75
61
|
currentOption.value = props.decisionTree
|
|
76
62
|
}
|
|
77
63
|
|
|
64
|
+
const styleIntro = computed(() => {
|
|
65
|
+
const noInstruction = !props.initialInstruction;
|
|
66
|
+
const noMedia = !props.media;
|
|
67
|
+
|
|
68
|
+
if (noInstruction && noMedia) {
|
|
69
|
+
return 'pt-44';
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
return '';
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
|
|
78
76
|
|
|
79
77
|
|
|
80
78
|
// Return function
|
|
@@ -107,10 +105,10 @@ const restart = () => {
|
|
|
107
105
|
|
|
108
106
|
|
|
109
107
|
|
|
110
|
-
const nextSlide = (option:
|
|
108
|
+
const nextSlide = (option:TreeNode) => {
|
|
111
109
|
//currentSlide.value++
|
|
112
110
|
path.value.push(option)
|
|
113
|
-
if (option.
|
|
111
|
+
if (option.children && option.children.length > 0) {
|
|
114
112
|
currentOption.value = option; // drill into next level
|
|
115
113
|
} else {
|
|
116
114
|
currentOption.value = null; // reached the end (leaf node)
|
|
@@ -120,51 +118,32 @@ const nextSlide = (option:Option) => {
|
|
|
120
118
|
|
|
121
119
|
|
|
122
120
|
//helper function
|
|
123
|
-
function convertOptionToTreeNode(option:
|
|
121
|
+
function convertOptionToTreeNode(option: TreeNode, path: TreeNode[]): TreeNode {
|
|
124
122
|
const isActive = path.includes(option);
|
|
125
|
-
|
|
126
123
|
return {
|
|
127
124
|
name: option.name,
|
|
128
|
-
text: option.
|
|
129
|
-
component: option.
|
|
125
|
+
text: option.text,
|
|
126
|
+
component: option.component,
|
|
130
127
|
active: isActive,
|
|
131
|
-
children: option.
|
|
128
|
+
children: option.children?.map(child => convertOptionToTreeNode(child, path))
|
|
132
129
|
};
|
|
133
130
|
}
|
|
134
131
|
|
|
135
132
|
|
|
136
|
-
//styles computed
|
|
137
|
-
|
|
138
|
-
const gridStyle = computed(()=>{
|
|
139
|
-
if(currentOption.value &&
|
|
140
|
-
currentOption.value.options &&
|
|
141
|
-
currentOption.value.options?.length <= 2) {
|
|
142
|
-
return 'grid-cols-2'
|
|
143
|
-
}
|
|
144
|
-
return 'grid-cols-3'
|
|
145
|
-
})
|
|
146
|
-
|
|
147
|
-
const currentLengthOptions = computed(()=> {
|
|
148
|
-
if(currentOption.value && currentOption.value.options){
|
|
149
|
-
return currentOption.value.options.length
|
|
150
|
-
}
|
|
151
|
-
return 0
|
|
152
|
-
})
|
|
153
|
-
|
|
154
133
|
|
|
155
134
|
</script>
|
|
156
135
|
|
|
157
136
|
<template>
|
|
158
137
|
<div>
|
|
159
138
|
<div
|
|
160
|
-
class="
|
|
139
|
+
class=" bg-gray-200 dark:bg-slate-800 rounded-md p-4 flex flex-col"
|
|
161
140
|
:style="{ minHeight: '500px', backgroundColor: bgColor }"
|
|
162
141
|
>
|
|
163
142
|
<!-- <div v-for="item in path" :key="item.name">
|
|
164
143
|
<span class="text-xs">{{ item.name }}</span>
|
|
165
144
|
</div> -->
|
|
166
145
|
<!-- Header (fixed at top of card) -->
|
|
167
|
-
<div>
|
|
146
|
+
<div class="mb-2">
|
|
168
147
|
<h1 class="font-bold text-3xl text-center">{{ title }}</h1>
|
|
169
148
|
<div v-if="currentOption" class="mt-2">
|
|
170
149
|
<EpBtn
|
|
@@ -180,38 +159,40 @@ const currentLengthOptions = computed(()=> {
|
|
|
180
159
|
</div>
|
|
181
160
|
|
|
182
161
|
<!-- Content Area -->
|
|
183
|
-
<div
|
|
162
|
+
<div>
|
|
184
163
|
<!-- Introductory Part -->
|
|
185
164
|
<div
|
|
186
165
|
v-if="isIntroductoryPart"
|
|
187
|
-
class="flex flex-col
|
|
166
|
+
class="w-full flex flex-col space-y-6"
|
|
188
167
|
>
|
|
189
168
|
<TextMedia
|
|
190
|
-
|
|
191
|
-
:text="initialInstruction"
|
|
169
|
+
:text="initialInstruction ?? ''"
|
|
192
170
|
:media="media"
|
|
171
|
+
:cols="initialTwoCols"
|
|
193
172
|
/>
|
|
194
|
-
<
|
|
173
|
+
<div :class="`justify-center flex ${styleIntro}`">
|
|
174
|
+
<EpBtn type="primary" rounded @click="start">{{labelStart}}</EpBtn>
|
|
175
|
+
</div>
|
|
195
176
|
</div>
|
|
196
177
|
|
|
197
178
|
<!-- Slides -->
|
|
198
179
|
<template v-else-if="currentOption && !isIntroductoryPart">
|
|
199
180
|
<div class="flex flex-col items-center justify-center w-full">
|
|
200
181
|
<div :class="`flex flex-col items-center justify-center ${transitionAnimation}`">
|
|
201
|
-
<TextMedia
|
|
202
|
-
:text="currentOption.
|
|
203
|
-
:media="currentOption.
|
|
182
|
+
<TextMedia
|
|
183
|
+
:text="currentOption.text ?? ''"
|
|
184
|
+
:media="currentOption.component"
|
|
185
|
+
:cols="currentOption.cols"
|
|
204
186
|
/>
|
|
205
187
|
|
|
206
188
|
<div
|
|
207
|
-
:class="`w-full my-4 mx-4
|
|
208
|
-
:style="{ placeItems: currentLengthOptions <= 4 ? 'center' : 'initial' }"
|
|
189
|
+
:class="`w-full my-4 mx-4 flex flex-wrap gap-2 justify-center items-center`"
|
|
209
190
|
>
|
|
210
|
-
<template v-for="(option, index) in currentOption.
|
|
191
|
+
<template v-for="(option, index) in currentOption.children" :key="`option-${index}`">
|
|
211
192
|
<EpBtn
|
|
212
193
|
rounded
|
|
213
194
|
type="primary"
|
|
214
|
-
class="w-
|
|
195
|
+
class="flex-1 min-w-[120px] sm:min-w-[160px] max-w-xs"
|
|
215
196
|
@click="nextSlide(option)"
|
|
216
197
|
>
|
|
217
198
|
{{ option.name }}
|
|
@@ -229,16 +210,16 @@ const currentLengthOptions = computed(()=> {
|
|
|
229
210
|
<EpHierarchy :nodes="userPath"/>
|
|
230
211
|
</template> -->
|
|
231
212
|
<h3 class="text-xl text-center font-semibold">{{ labelFinish }}</h3>
|
|
232
|
-
<div class="flex gap-6 mt-3">
|
|
213
|
+
<div :class="`flex gap-6 mt-3 ${!generalFeedback ? 'w-3/6 mx-auto':''}`">
|
|
233
214
|
<div class="w-full">
|
|
234
215
|
<h3 class="font-semibold mb-3">{{ labelYourPath }}</h3>
|
|
235
216
|
<div class="overflow-auto p-2" :style="{height: '200px'}">
|
|
236
217
|
<template v-for="(item,i) in path" :key="`user-choice-${i}`">
|
|
237
218
|
<div class="mb-2">
|
|
238
219
|
<Details
|
|
239
|
-
:content="item.
|
|
220
|
+
:content="item.text ?? ''"
|
|
240
221
|
:title="item.name"
|
|
241
|
-
:media="item.
|
|
222
|
+
:media="item.component"
|
|
242
223
|
/>
|
|
243
224
|
</div>
|
|
244
225
|
</template>
|
|
@@ -253,12 +234,12 @@ const currentLengthOptions = computed(()=> {
|
|
|
253
234
|
:color-path="props.colorPath"
|
|
254
235
|
:color-rect="props.colorRect"
|
|
255
236
|
/>
|
|
256
|
-
<div class="flex justify-end">
|
|
237
|
+
<div class="flex justify-end mt-4">
|
|
257
238
|
<EpBtn @click="showPath = false" type="error" outlined rounded>{{labelClose}}</EpBtn>
|
|
258
239
|
</div>
|
|
259
240
|
</EpModal>
|
|
260
241
|
</div>
|
|
261
|
-
<div v-if="generalFeedback" class="flex flex-col col-span-1 items-center px-4 border-l-2 border-gray-700 overflow-auto">
|
|
242
|
+
<div v-if="generalFeedback" class="flex w-full flex-col col-span-1 items-center px-4 border-l-2 border-gray-700 overflow-auto">
|
|
262
243
|
<div v-html="useRenderText(generalFeedback)"></div>
|
|
263
244
|
</div>
|
|
264
245
|
</div>
|
|
@@ -76,7 +76,7 @@ const { src, hideIcon } = toRefs(props);
|
|
|
76
76
|
</div>
|
|
77
77
|
<div class="flex items-center justify-center px-7" v-else-if="!hideIcon">
|
|
78
78
|
<div class="text-base dark:text-white'">
|
|
79
|
-
<EpIcon :size="60" :icon-path="renderIcon"></EpIcon>
|
|
79
|
+
<EpIcon :size="60" :icon-path="renderIcon" extra-class="dark:text-white"></EpIcon>
|
|
80
80
|
</div>
|
|
81
81
|
</div>
|
|
82
82
|
<div :class="`py-6 flex-1 ${hideIcon?'px-6':'pr-2'}`">
|
|
@@ -74,14 +74,14 @@ const currentRenderComponent = computed(() => {
|
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
const { path, name } = useComponent(currentNode.value.component.type)
|
|
77
|
-
console.log(path, name)
|
|
77
|
+
//console.log(path, name)
|
|
78
78
|
let fullPath = ''
|
|
79
79
|
if(path === "medias"){
|
|
80
80
|
fullPath = `./${name}.vue`
|
|
81
81
|
}else{
|
|
82
82
|
fullPath = `../${path}/${name}.vue`
|
|
83
83
|
}
|
|
84
|
-
console.log(fullPath)
|
|
84
|
+
//console.log(fullPath)
|
|
85
85
|
const loader = components[fullPath] as (() => Promise<{ default: NestedComponents }>) | undefined
|
|
86
86
|
|
|
87
87
|
if (!loader) {
|
|
@@ -7,6 +7,8 @@ import type { NestedComponents } from "../../types/Component";
|
|
|
7
7
|
interface Props{
|
|
8
8
|
media?:NestedComponents;
|
|
9
9
|
text:string;
|
|
10
|
+
cols?:boolean;
|
|
11
|
+
textLeft?:boolean
|
|
10
12
|
}
|
|
11
13
|
|
|
12
14
|
const props = withDefaults(defineProps<Props>(), {
|
|
@@ -20,11 +22,19 @@ const currentRenderComponent = computed(() => {
|
|
|
20
22
|
return null;
|
|
21
23
|
});
|
|
22
24
|
|
|
25
|
+
const colsStyle = computed(()=> {
|
|
26
|
+
return props.cols ? 'flex items-center justify-center gap-1' : ''
|
|
27
|
+
})
|
|
28
|
+
|
|
29
|
+
const alignText = computed(()=>{
|
|
30
|
+
return props.textLeft ? '' : 'justify-center';
|
|
31
|
+
})
|
|
32
|
+
|
|
23
33
|
</script>
|
|
24
34
|
|
|
25
35
|
<template>
|
|
26
|
-
<div class="
|
|
27
|
-
<div class="w-full" v-html="useRenderText(text)"></div>
|
|
36
|
+
<div :class="colsStyle">
|
|
37
|
+
<div :class="`w-full flex ${alignText}`" v-html="useRenderText(text)"></div>
|
|
28
38
|
<div class="w-full" v-if="currentRenderComponent && media">
|
|
29
39
|
<component
|
|
30
40
|
:is="currentRenderComponent"
|
package/dist/BgAudio-BcFqGqtU.js
DELETED
package/dist/Details-CIvWkwkL.js
DELETED
package/dist/EpAlert-ekJFjrKE.js
DELETED
package/dist/EpAudio-CYtAp4vr.js
DELETED
package/dist/EpBadge-CXE6l-qw.js
DELETED
package/dist/EpBtn-CGPT0t1x.js
DELETED
package/dist/EpCard-BAL0h269.js
DELETED
package/dist/EpChip-DbfJF4Xn.js
DELETED
package/dist/EpEdu-BeLnkTN_.js
DELETED
package/dist/EpFlex-KZeENbBn.js
DELETED
package/dist/EpHover-B7j4upQo.js
DELETED
package/dist/EpIcon-gsCiTrHT.js
DELETED
package/dist/EpImg-CnaFpZFC.js
DELETED
package/dist/EpLink-BvPRyfm0.js
DELETED
package/dist/EpModal-6PIkNrq4.js
DELETED
package/dist/EpQuote-BVUoMSCm.js
DELETED
package/dist/EpRadio-CiyUJGfK.js
DELETED
package/dist/EpScope-Bd8iU__N.js
DELETED