ep-lib-ts 1.0.51 → 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 (144) 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-DjqBE3PK.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-BdqCt0bX.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-Dn3ZhCkT.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-Yhz8LAhH.js → EpList-BQQ6YyEU.js} +1 -1
  38. package/dist/EpModal-C3eAYkVv.js +4 -0
  39. package/dist/{EpNothing-TCBDkSPe.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 +1 -0
  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-DVN62rPz.js → index-C4wT5qUE.js} +1 -1
  72. package/dist/{index-BZh3ZH_r.js → index-CxWafW_X.js} +1997 -1982
  73. package/dist/{prism-CnGAWjP8.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 +1 -0
  77. package/package.json +1 -1
  78. package/src/components/basics/EpCard.vue +2 -2
  79. package/src/components/educationals/EpBranchingScenario.vue +29 -42
  80. package/src/components/educationals/EpDocument.vue +1 -1
  81. package/src/components/forms/EpSwitch.vue +0 -1
  82. package/src/components/tools/Details.vue +1 -0
  83. package/src/components/tools/TextMedia.vue +12 -2
  84. package/dist/BgAudio-CfOyhY60.js +0 -4
  85. package/dist/Details-C2ibtnG1.js +0 -4
  86. package/dist/DisplayBox-842AxmPD.js +0 -4
  87. package/dist/EpAlert-D_1oS26j.js +0 -4
  88. package/dist/EpAudio-CkAmtlFP.js +0 -4
  89. package/dist/EpAvatar-C3aEQ8pb.js +0 -4
  90. package/dist/EpBadge-DTAqBHg0.js +0 -4
  91. package/dist/EpBarChart-B477k9Ot.js +0 -4
  92. package/dist/EpBtn-w2CaP7VV.js +0 -4
  93. package/dist/EpCard-BBn794w5.js +0 -4
  94. package/dist/EpCardLink-BXD2hNWN.js +0 -4
  95. package/dist/EpChip-D7yiZLYj.js +0 -4
  96. package/dist/EpCodeblock-Csmouv_q.js +0 -4
  97. package/dist/EpConclusion-B3uB1fwu.js +0 -4
  98. package/dist/EpContentSlider-DhQqokB-.js +0 -4
  99. package/dist/EpDescription-DXFCekiB.js +0 -4
  100. package/dist/EpDivider-DuqIp04O.js +0 -4
  101. package/dist/EpDocument-kCCmYdZd.js +0 -4
  102. package/dist/EpEdu-Cmoe0FPr.js +0 -4
  103. package/dist/EpFlex-B5vaUPNy.js +0 -4
  104. package/dist/EpFunnelChart-CCY-RIHg.js +0 -4
  105. package/dist/EpHeader-hbN7H1zv.js +0 -4
  106. package/dist/EpHover-BEfGwtRy.js +0 -4
  107. package/dist/EpHoverCard-CLc-BteV.js +0 -4
  108. package/dist/EpIcon-DBG-wtLX.js +0 -4
  109. package/dist/EpIframe-B8sHwop-.js +0 -4
  110. package/dist/EpImg-CmzA6uO-.js +0 -4
  111. package/dist/EpImgCarousel-CV6GYKIV.js +0 -4
  112. package/dist/EpInstructions-_ZpOEQkA.js +0 -4
  113. package/dist/EpIntroduction-LMhdJymO.js +0 -4
  114. package/dist/EpLineChart-BTfB4-nk.js +0 -4
  115. package/dist/EpLink-D_RoQCwk.js +0 -4
  116. package/dist/EpLinkVersion-CyJ5Zso3.js +0 -4
  117. package/dist/EpModal-D6002RFz.js +0 -4
  118. package/dist/EpObjective-me7OFFWn.js +0 -4
  119. package/dist/EpPieChart-C0myD-Lh.js +0 -4
  120. package/dist/EpQuestion-Dgd_r9Di.js +0 -4
  121. package/dist/EpQuote-CerpN43p.js +0 -4
  122. package/dist/EpRadio-D788J3ol.js +0 -4
  123. package/dist/EpRadioSummative-CpBwOYCi.js +0 -4
  124. package/dist/EpReading-wcrCpcQ-.js +0 -4
  125. package/dist/EpResource-Dh038rvl.js +0 -4
  126. package/dist/EpScope-N1_GpZry.js +0 -4
  127. package/dist/EpSection-BtV8HQLl.js +0 -4
  128. package/dist/EpSectionCols-CVaWBh4Z.js +0 -4
  129. package/dist/EpSkeleton-PLY2DMXj.js +0 -4
  130. package/dist/EpSoftware--IWOZC1R.js +0 -4
  131. package/dist/EpSpecificObjective-CH7jCrOb.js +0 -4
  132. package/dist/EpSpinner-BnJarh6N.js +0 -4
  133. package/dist/EpStackedList-CB9birW-.js +0 -4
  134. package/dist/EpSummativeTable-C5HW1Sk5.js +0 -4
  135. package/dist/EpSvg-F4ikbEKY.js +0 -4
  136. package/dist/EpSvgShow-CEdQpJyn.js +0 -4
  137. package/dist/EpTable-SSCSZK__.js +0 -4
  138. package/dist/EpTerm-_NGJgmG0.js +0 -4
  139. package/dist/EpText-CzSBl1zy.js +0 -4
  140. package/dist/EpTimeLine-BnK4Gl34.js +0 -4
  141. package/dist/EpVideo-DLYxwxnk.js +0 -4
  142. package/dist/EpVideoPanopto-BOx_s1Qa.js +0 -4
  143. package/dist/EpWordDef-CGSFlRbS.js +0 -4
  144. package/dist/TextMedia-ovcNIdCV.js +0 -4
@@ -1,4 +1,4 @@
1
- import { ac as V, ad as W } from "./index-BZh3ZH_r.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-633f0b83]{overflow:auto;border:1px solid #ddd}.tree-container[data-v-633f0b83]{width:100%;overflow-x:auto}@keyframes fade-e6b482bf{0%{opacity:0}to{opacity:1}}@keyframes scale-e6b482bf{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideY-e6b482bf{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.fade[data-v-e6b482bf]{animation:fade-e6b482bf 1s}.scale[data-v-e6b482bf]{animation:scale-e6b482bf 1s}.slideY[data-v-e6b482bf]{animation:slideY-e6b482bf 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;
@@ -7,6 +7,7 @@ export interface 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.51",
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,19 +13,11 @@ 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
23
  decisionTree: TreeNode
@@ -69,6 +61,18 @@ const start = () => {
69
61
  currentOption.value = props.decisionTree
70
62
  }
71
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
+
72
76
 
73
77
 
74
78
  // Return function
@@ -116,7 +120,6 @@ const nextSlide = (option:TreeNode) => {
116
120
  //helper function
117
121
  function convertOptionToTreeNode(option: TreeNode, path: TreeNode[]): TreeNode {
118
122
  const isActive = path.includes(option);
119
-
120
123
  return {
121
124
  name: option.name,
122
125
  text: option.text,
@@ -127,38 +130,20 @@ function convertOptionToTreeNode(option: TreeNode, path: TreeNode[]): TreeNode {
127
130
  }
128
131
 
129
132
 
130
- //styles computed
131
-
132
- const gridStyle = computed(()=>{
133
- if(currentOption.value &&
134
- currentOption.value.children &&
135
- currentOption.value.children?.length <= 2) {
136
- return 'grid-cols-2'
137
- }
138
- return 'grid-cols-3'
139
- })
140
-
141
- const currentLengthOptions = computed(()=> {
142
- if(currentOption.value && currentOption.value.children){
143
- return currentOption.value.children.length
144
- }
145
- return 0
146
- })
147
-
148
133
 
149
134
  </script>
150
135
 
151
136
  <template>
152
137
  <div>
153
138
  <div
154
- 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"
155
140
  :style="{ minHeight: '500px', backgroundColor: bgColor }"
156
141
  >
157
142
  <!-- <div v-for="item in path" :key="item.name">
158
143
  <span class="text-xs">{{ item.name }}</span>
159
144
  </div> -->
160
145
  <!-- Header (fixed at top of card) -->
161
- <div>
146
+ <div class="mb-2">
162
147
  <h1 class="font-bold text-3xl text-center">{{ title }}</h1>
163
148
  <div v-if="currentOption" class="mt-2">
164
149
  <EpBtn
@@ -174,38 +159,40 @@ const currentLengthOptions = computed(()=> {
174
159
  </div>
175
160
 
176
161
  <!-- Content Area -->
177
- <div class="flex-grow flex items-center justify-center">
162
+ <div>
178
163
  <!-- Introductory Part -->
179
164
  <div
180
165
  v-if="isIntroductoryPart"
181
- class="flex flex-col items-center justify-center space-y-6"
166
+ class="w-full flex flex-col space-y-6"
182
167
  >
183
168
  <TextMedia
184
- v-if="initialInstruction && media"
185
- :text="initialInstruction"
169
+ :text="initialInstruction ?? ''"
186
170
  :media="media"
171
+ :cols="initialTwoCols"
187
172
  />
188
- <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>
189
176
  </div>
190
177
 
191
178
  <!-- Slides -->
192
179
  <template v-else-if="currentOption && !isIntroductoryPart">
193
180
  <div class="flex flex-col items-center justify-center w-full">
194
181
  <div :class="`flex flex-col items-center justify-center ${transitionAnimation}`">
195
- <TextMedia
182
+ <TextMedia
196
183
  :text="currentOption.text ?? ''"
197
184
  :media="currentOption.component"
185
+ :cols="currentOption.cols"
198
186
  />
199
187
 
200
188
  <div
201
- :class="`w-full my-4 mx-4 grid gap-4 ${gridStyle}`"
202
- :style="{ placeItems: currentLengthOptions <= 4 ? 'center' : 'initial' }"
189
+ :class="`w-full my-4 mx-4 flex flex-wrap gap-2 justify-center items-center`"
203
190
  >
204
191
  <template v-for="(option, index) in currentOption.children" :key="`option-${index}`">
205
192
  <EpBtn
206
193
  rounded
207
194
  type="primary"
208
- class="w-full max-w-xs text-center"
195
+ class="flex-1 min-w-[120px] sm:min-w-[160px] max-w-xs"
209
196
  @click="nextSlide(option)"
210
197
  >
211
198
  {{ option.name }}
@@ -223,7 +210,7 @@ const currentLengthOptions = computed(()=> {
223
210
  <EpHierarchy :nodes="userPath"/>
224
211
  </template> -->
225
212
  <h3 class="text-xl text-center font-semibold">{{ labelFinish }}</h3>
226
- <div class="flex gap-6 mt-3">
213
+ <div :class="`flex gap-6 mt-3 ${!generalFeedback ? 'w-3/6 mx-auto':''}`">
227
214
  <div class="w-full">
228
215
  <h3 class="font-semibold mb-3">{{ labelYourPath }}</h3>
229
216
  <div class="overflow-auto p-2" :style="{height: '200px'}">
@@ -247,12 +234,12 @@ const currentLengthOptions = computed(()=> {
247
234
  :color-path="props.colorPath"
248
235
  :color-rect="props.colorRect"
249
236
  />
250
- <div class="flex justify-end">
237
+ <div class="flex justify-end mt-4">
251
238
  <EpBtn @click="showPath = false" type="error" outlined rounded>{{labelClose}}</EpBtn>
252
239
  </div>
253
240
  </EpModal>
254
241
  </div>
255
- <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">
256
243
  <div v-html="useRenderText(generalFeedback)"></div>
257
244
  </div>
258
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 {
@@ -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-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { a9 as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { aa as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { a4 as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { U as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { c as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { d as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { u as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { e } from "./index-BZh3ZH_r.js";
2
- export {
3
- e as default
4
- };
@@ -1,4 +0,0 @@
1
- import { f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { V as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { g as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { y as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { z as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { M as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { A as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { h as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { B as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { C as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { i as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { v as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { a5 as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { j as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { k as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { l as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { W as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { m } from "./index-BZh3ZH_r.js";
2
- export {
3
- m as default
4
- };
@@ -1,4 +0,0 @@
1
- import { n as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { D as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { E as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { w as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { X as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { Y as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { Q as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { F as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { x as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { R as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { a6 as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { K as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { L as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { b as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { G as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { H as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { o } from "./index-BZh3ZH_r.js";
2
- export {
3
- o as default
4
- };
@@ -1,4 +0,0 @@
1
- import { p as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { a7 as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { Z as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { I as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { q as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { r } from "./index-BZh3ZH_r.js";
2
- export {
3
- r as default
4
- };
@@ -1,4 +0,0 @@
1
- import { S as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { $ as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { T as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { s } from "./index-BZh3ZH_r.js";
2
- export {
3
- s as default
4
- };
@@ -1,4 +0,0 @@
1
- import { _ as f } from "./index-BZh3ZH_r.js";
2
- export {
3
- f as default
4
- };
@@ -1,4 +0,0 @@
1
- import { t } from "./index-BZh3ZH_r.js";
2
- export {
3
- t as default
4
- };