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.
Files changed (145) hide show
  1. package/dist/BgAudio-B0h7VdWq.js +4 -0
  2. package/dist/Details-DZKLvF9v.js +4 -0
  3. package/dist/DisplayBox-DDLKnmKJ.js +4 -0
  4. package/dist/EpAlert-BjUplxWX.js +4 -0
  5. package/dist/EpAudio-CATD1Jbh.js +4 -0
  6. package/dist/EpAvatar-Dfsz07bn.js +4 -0
  7. package/dist/EpBadge-Dvu88JNL.js +4 -0
  8. package/dist/EpBarChart-Cl_SiAvN.js +4 -0
  9. package/dist/EpBtn-HearU7fk.js +4 -0
  10. package/dist/EpCard-DaEFsYjJ.js +4 -0
  11. package/dist/EpCardLink-B7-e3xGJ.js +4 -0
  12. package/dist/EpChip-B3Dl3sbg.js +4 -0
  13. package/dist/EpCodeblock-DhPVKsZw.js +4 -0
  14. package/dist/EpConclusion-DaQXAgp_.js +4 -0
  15. package/dist/EpContentSlider-MgPnsxoZ.js +4 -0
  16. package/dist/{EpDarkmode-CGgVbwTf.js → EpDarkmode-BmcA1kre.js} +1 -1
  17. package/dist/EpDescription-DWXlwJEL.js +4 -0
  18. package/dist/EpDivider-BmUwghGw.js +4 -0
  19. package/dist/EpDocument-Bh7tx9Z3.js +4 -0
  20. package/dist/{EpDraggable-BonwHvwO.js → EpDraggable-CEqhDHAq.js} +1 -1
  21. package/dist/EpEdu-CTUhM5xY.js +4 -0
  22. package/dist/EpFlex-bvQbwBqj.js +4 -0
  23. package/dist/EpFunnelChart-D57Qx8Ns.js +4 -0
  24. package/dist/EpHeader-BeNQdrDL.js +4 -0
  25. package/dist/EpHover-C6xm5kes.js +4 -0
  26. package/dist/EpHoverCard-D27lS9Lu.js +4 -0
  27. package/dist/EpIcon-DYyh_r_t.js +4 -0
  28. package/dist/EpIframe-DbHttqXB.js +4 -0
  29. package/dist/EpImg-DsXQcvsP.js +4 -0
  30. package/dist/EpImgCarousel-CCOYX3Sf.js +4 -0
  31. package/dist/{EpInput-nIcyx2pC.js → EpInput-B2O5ovqX.js} +1 -1
  32. package/dist/EpInstructions-UzKvuasV.js +4 -0
  33. package/dist/EpIntroduction-DMSd580N.js +4 -0
  34. package/dist/EpLineChart-vIg84kEL.js +4 -0
  35. package/dist/EpLink-ByyNViWv.js +4 -0
  36. package/dist/EpLinkVersion-CcG0KUCD.js +4 -0
  37. package/dist/{EpList-DTn92hAt.js → EpList-BQQ6YyEU.js} +1 -1
  38. package/dist/EpModal-C3eAYkVv.js +4 -0
  39. package/dist/{EpNothing-Dg2YUQkw.js → EpNothing-D53i__PJ.js} +1 -1
  40. package/dist/EpObjective-B1T5_B94.js +4 -0
  41. package/dist/EpPieChart-BLup5pM9.js +4 -0
  42. package/dist/EpQuestion-BMmO301I.js +4 -0
  43. package/dist/EpQuote-BA8jGdmn.js +4 -0
  44. package/dist/EpRadio-BHQ8QDek.js +4 -0
  45. package/dist/EpRadioSummative-BSSwzhJH.js +4 -0
  46. package/dist/EpReading-pRs9Mtww.js +4 -0
  47. package/dist/EpResource-DVUh5ZLE.js +4 -0
  48. package/dist/EpScope-DlbXKFok.js +4 -0
  49. package/dist/EpSection-CI_u2BBY.js +4 -0
  50. package/dist/EpSectionCols-CpHJ4ZqV.js +4 -0
  51. package/dist/EpSkeleton-CneeChkb.js +4 -0
  52. package/dist/EpSoftware-wMOFrTQs.js +4 -0
  53. package/dist/EpSpecificObjective-D3-nfcdE.js +4 -0
  54. package/dist/EpSpinner-DHmfsvnE.js +4 -0
  55. package/dist/EpStackedList-DbQ_vuea.js +4 -0
  56. package/dist/EpSummativeTable-DlEEGid2.js +4 -0
  57. package/dist/EpSvg-N-aSiFRB.js +4 -0
  58. package/dist/EpSvgShow-DrenPNTe.js +4 -0
  59. package/dist/EpTable-CqM-ocWg.js +4 -0
  60. package/dist/EpTerm-D9ba8WkL.js +4 -0
  61. package/dist/EpText-BWLZ6D8r.js +4 -0
  62. package/dist/EpTimeLine-CXmdGtrb.js +4 -0
  63. package/dist/EpVideo-Blqwux-i.js +4 -0
  64. package/dist/EpVideoPanopto-DlHfv8Gm.js +4 -0
  65. package/dist/EpWordDef-Dbw7-k75.js +4 -0
  66. package/dist/TextMedia-D5hYAp0w.js +4 -0
  67. package/dist/components/educationals/EpBranchingScenario.vue.d.ts +3 -13
  68. package/dist/components/tools/TextMedia.vue.d.ts +2 -0
  69. package/dist/ep-lib-ts.js +1 -1
  70. package/dist/ep-lib-ts.umd.cjs +170 -170
  71. package/dist/{index-0vB69UCj.js → index-C4wT5qUE.js} +1 -1
  72. package/dist/{index-DLv4mjKM.js → index-CxWafW_X.js} +2000 -1986
  73. package/dist/{prism-6W4dR8A-.js → prism-CgWkMycv.js} +1 -1
  74. package/dist/style.css +1 -1
  75. package/dist/types/Component.d.ts +1 -0
  76. package/dist/types/Hierarchy.d.ts +2 -1
  77. package/package.json +1 -1
  78. package/src/components/basics/EpCard.vue +2 -2
  79. package/src/components/educationals/EpBranchingScenario.vue +43 -62
  80. package/src/components/educationals/EpDocument.vue +1 -1
  81. package/src/components/forms/EpSwitch.vue +0 -1
  82. package/src/components/medias/EpHierarchy.vue +2 -2
  83. package/src/components/tools/Details.vue +1 -0
  84. package/src/components/tools/TextMedia.vue +12 -2
  85. package/dist/BgAudio-BcFqGqtU.js +0 -4
  86. package/dist/Details-CIvWkwkL.js +0 -4
  87. package/dist/DisplayBox-CEcrSGuz.js +0 -4
  88. package/dist/EpAlert-ekJFjrKE.js +0 -4
  89. package/dist/EpAudio-CYtAp4vr.js +0 -4
  90. package/dist/EpAvatar-I6vMqpae.js +0 -4
  91. package/dist/EpBadge-CXE6l-qw.js +0 -4
  92. package/dist/EpBarChart-BwYJfBv3.js +0 -4
  93. package/dist/EpBtn-CGPT0t1x.js +0 -4
  94. package/dist/EpCard-BAL0h269.js +0 -4
  95. package/dist/EpCardLink-b8hhgrUR.js +0 -4
  96. package/dist/EpChip-DbfJF4Xn.js +0 -4
  97. package/dist/EpCodeblock-CBj8Oacf.js +0 -4
  98. package/dist/EpConclusion-DffcCS5s.js +0 -4
  99. package/dist/EpContentSlider-DaqabBm_.js +0 -4
  100. package/dist/EpDescription-BqHLNXp7.js +0 -4
  101. package/dist/EpDivider-DBxMnU3f.js +0 -4
  102. package/dist/EpDocument-ZcGgjOAh.js +0 -4
  103. package/dist/EpEdu-BeLnkTN_.js +0 -4
  104. package/dist/EpFlex-KZeENbBn.js +0 -4
  105. package/dist/EpFunnelChart-BWj5cXjn.js +0 -4
  106. package/dist/EpHeader-YlRsCwDV.js +0 -4
  107. package/dist/EpHover-B7j4upQo.js +0 -4
  108. package/dist/EpHoverCard-Dw4D1Chz.js +0 -4
  109. package/dist/EpIcon-gsCiTrHT.js +0 -4
  110. package/dist/EpIframe-CEtKFm2f.js +0 -4
  111. package/dist/EpImg-CnaFpZFC.js +0 -4
  112. package/dist/EpImgCarousel-BXDxCRpJ.js +0 -4
  113. package/dist/EpInstructions-CzXHOnBs.js +0 -4
  114. package/dist/EpIntroduction-BeWOqC7G.js +0 -4
  115. package/dist/EpLineChart-DsTQ3hJc.js +0 -4
  116. package/dist/EpLink-BvPRyfm0.js +0 -4
  117. package/dist/EpLinkVersion-BX85xOiK.js +0 -4
  118. package/dist/EpModal-6PIkNrq4.js +0 -4
  119. package/dist/EpObjective-AB4lqQvE.js +0 -4
  120. package/dist/EpPieChart-B28rhPkR.js +0 -4
  121. package/dist/EpQuestion-CMiFDUEA.js +0 -4
  122. package/dist/EpQuote-BVUoMSCm.js +0 -4
  123. package/dist/EpRadio-CiyUJGfK.js +0 -4
  124. package/dist/EpRadioSummative-BIH0Gvzc.js +0 -4
  125. package/dist/EpReading-DQRx5bVw.js +0 -4
  126. package/dist/EpResource-dB2HSfCL.js +0 -4
  127. package/dist/EpScope-Bd8iU__N.js +0 -4
  128. package/dist/EpSection-D-gdCenC.js +0 -4
  129. package/dist/EpSectionCols-BiUWS3dK.js +0 -4
  130. package/dist/EpSkeleton-CFkomMuY.js +0 -4
  131. package/dist/EpSoftware-Aamv74mm.js +0 -4
  132. package/dist/EpSpecificObjective-DA32ZoFL.js +0 -4
  133. package/dist/EpSpinner-BAKZ17aN.js +0 -4
  134. package/dist/EpStackedList-D2-RpdUe.js +0 -4
  135. package/dist/EpSummativeTable-BfxiKjX2.js +0 -4
  136. package/dist/EpSvg-DDr7pd6Y.js +0 -4
  137. package/dist/EpSvgShow-Cg_E54ho.js +0 -4
  138. package/dist/EpTable-pJWqDyoC.js +0 -4
  139. package/dist/EpTerm-QBcZje7U.js +0 -4
  140. package/dist/EpText-Bq5OrV3Z.js +0 -4
  141. package/dist/EpTimeLine-7LN-NyXU.js +0 -4
  142. package/dist/EpVideo-KC7b4d-T.js +0 -4
  143. package/dist/EpVideoPanopto-DpuTCKoL.js +0 -4
  144. package/dist/EpWordDef-hJ6pbOSX.js +0 -4
  145. package/dist/TextMedia-B5jsErAT.js +0 -4
@@ -1,4 +1,4 @@
1
- import { ac as V, ad as W } from "./index-DLv4mjKM.js";
1
+ import { ac as V, ad as W } from "./index-CxWafW_X.js";
2
2
  function ee(S, P) {
3
3
  for (var i = 0; i < P.length; i++) {
4
4
  const g = P[i];
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-e0992f47]{overflow:auto;border:1px solid #ddd}.tree-container[data-v-e0992f47]{width:100%;overflow-x:auto}@keyframes fade-1e22db06{0%{opacity:0}to{opacity:1}}@keyframes scale-1e22db06{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideY-1e22db06{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.fade[data-v-1e22db06]{animation:fade-1e22db06 1s}.scale[data-v-1e22db06]{animation:scale-1e22db06 1s}.slideY[data-v-1e22db06]{animation:slideY-1e22db06 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
+ .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}
@@ -10,6 +10,7 @@ export interface ContentComponents {
10
10
  }
11
11
  export type NestedComponent = "EpSvg" | "EpImg" | "EpVideo" | "EpQuote";
12
12
  export interface NestedComponents {
13
+ uid?: string;
13
14
  type: NestedComponent;
14
15
  data: {
15
16
  [key: string]: any;
@@ -1,12 +1,13 @@
1
1
  import { NestedComponents } from './Component';
2
2
 
3
3
  export interface TreeNode {
4
- uid?: string;
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
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ep-lib-ts",
3
3
  "private": false,
4
- "version": "1.0.50",
4
+ "version": "1.0.52",
5
5
  "files": [
6
6
  "dist",
7
7
  "src/components/"
@@ -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<Option[]>([])
51
+ const path = ref<TreeNode[]>([])
66
52
  const userPath = ref<TreeNode|null>(null)
67
- const currentOption = ref<Option | null>(null);
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:Option) => {
108
+ const nextSlide = (option:TreeNode) => {
111
109
  //currentSlide.value++
112
110
  path.value.push(option)
113
- if (option.options && option.options.length > 0) {
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: Option, path: Option[]): TreeNode {
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.question,
129
- component: option.media,
125
+ text: option.text,
126
+ component: option.component,
130
127
  active: isActive,
131
- children: option.options?.map(child => convertOptionToTreeNode(child, path))
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="mx-auto w-2/3 bg-gray-200 dark:bg-slate-800 rounded-md p-4 flex flex-col"
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 class="flex-grow flex items-center justify-center">
162
+ <div>
184
163
  <!-- Introductory Part -->
185
164
  <div
186
165
  v-if="isIntroductoryPart"
187
- class="flex flex-col items-center justify-center space-y-6"
166
+ class="w-full flex flex-col space-y-6"
188
167
  >
189
168
  <TextMedia
190
- v-if="initialInstruction && media"
191
- :text="initialInstruction"
169
+ :text="initialInstruction ?? ''"
192
170
  :media="media"
171
+ :cols="initialTwoCols"
193
172
  />
194
- <EpBtn type="primary" rounded @click="start">{{labelStart}}</EpBtn>
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.question"
203
- :media="currentOption.media"
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 grid gap-4 ${gridStyle}`"
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.options" :key="`option-${index}`">
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-full max-w-xs text-center"
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.question"
220
+ :content="item.text ?? ''"
240
221
  :title="item.name"
241
- :media="item.media"
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'}`">
@@ -1,6 +1,5 @@
1
1
  <script setup lang="ts">
2
2
  import { toRefs,computed } from "vue";
3
- import { defineEmits } from 'vue'
4
3
  import { type SwitchColorVariant, ColorVariants} from "../../types/Switch";
5
4
 
6
5
  interface Props {
@@ -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) {
@@ -28,6 +28,7 @@ const props = withDefaults(defineProps<Props>(), {
28
28
  <TextMedia
29
29
  :text="title"
30
30
  :media="media"
31
+ text-left
31
32
  />
32
33
  <EpDivider/>
33
34
  <div class="flex justify-end">
@@ -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="flex items-center justify-center gap-1">
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"
@@ -1,4 +0,0 @@
1
- import { a8 as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { a9 as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { aa as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { a4 as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { U as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { c as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { d as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { u as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { e } from "./index-DLv4mjKM.js";
2
- export {
3
- e as default
4
- };
@@ -1,4 +0,0 @@
1
- import { f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { V as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { g as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { y as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { z as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { M as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { A as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { h as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { B as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { C as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { i as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { v as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { a5 as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { j as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { k as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { l as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { W as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { m } from "./index-DLv4mjKM.js";
2
- export {
3
- m as default
4
- };
@@ -1,4 +0,0 @@
1
- import { n as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { D as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { E as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { w as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { X as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { Y as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { Q as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { F as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { x as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { R as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { a6 as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { K as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { L as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { b as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { G as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { H as f } from "./index-DLv4mjKM.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { o } from "./index-DLv4mjKM.js";
2
- export {
3
- o as default
4
- };