ep-lib-ts 0.0.8 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (137) hide show
  1. package/dist/components/basics/EpBadge.vue.d.ts +38 -4
  2. package/dist/components/basics/EpBtn.vue.d.ts +108 -4
  3. package/dist/components/basics/EpCard.vue.d.ts +95 -4
  4. package/dist/components/basics/EpChip.vue.d.ts +72 -4
  5. package/dist/components/basics/EpDivider.vue.d.ts +51 -4
  6. package/dist/components/basics/EpFlex.vue.d.ts +9 -4
  7. package/dist/components/basics/EpIcon.vue.d.ts +37 -4
  8. package/dist/components/basics/EpImg.vue.d.ts +76 -4
  9. package/dist/components/basics/EpSection.vue.d.ts +84 -4
  10. package/dist/components/basics/EpSpinner.vue.d.ts +32 -4
  11. package/dist/components/basics/EpTable.vue.d.ts +24 -4
  12. package/dist/components/basics/EpText.vue.d.ts +30 -4
  13. package/dist/components/charts/EpBarChart.vue.d.ts +82 -4
  14. package/dist/components/charts/EpLineChart.vue.d.ts +82 -4
  15. package/dist/components/charts/EpPieChart.vue.d.ts +1 -2
  16. package/dist/components/educationals/EpEdu.vue.d.ts +80 -4
  17. package/dist/components/educationals/EpReading.vue.d.ts +151 -4
  18. package/dist/components/educationals/EpScope.vue.d.ts +14 -4
  19. package/dist/components/interactions/EpAccordeon.vue.d.ts +53 -4
  20. package/dist/components/interactions/EpContentSlider.vue.d.ts +2 -5
  21. package/dist/components/interactions/EpModal.vue.d.ts +70 -5
  22. package/dist/components/interactions/EpQuestion.vue.d.ts +1 -2
  23. package/dist/components/interactions/EpTabs.vue.d.ts +2 -0
  24. package/dist/components/medias/EpAudio.vue.d.ts +79 -4
  25. package/dist/components/medias/EpCarousel.vue.d.ts +31 -4
  26. package/dist/components/medias/EpIframe.vue.d.ts +58 -4
  27. package/dist/components/medias/EpKatex.vue.d.ts +51 -4
  28. package/dist/components/medias/EpLink.vue.d.ts +73 -4
  29. package/dist/components/medias/EpSoftware.vue.d.ts +88 -4
  30. package/dist/components/medias/EpSvg.vue.d.ts +1 -2
  31. package/dist/components/medias/EpTerm.vue.d.ts +80 -4
  32. package/dist/components/medias/EpTimeLine.vue.d.ts +1 -2
  33. package/dist/components/medias/EpVideo.vue.d.ts +64 -4
  34. package/dist/components/medias/EpVideoPanopto.vue.d.ts +64 -4
  35. package/dist/components/signages/EpAlert.vue.d.ts +63 -4
  36. package/dist/components/signages/EpHeader.vue.d.ts +101 -4
  37. package/dist/components/signages/EpQuote.vue.d.ts +39 -4
  38. package/dist/components/tools/BgAudio.vue.d.ts +14 -4
  39. package/dist/components/tools/DisplayBox.vue.d.ts +17 -4
  40. package/dist/ep-lib-ts.js +27411 -0
  41. package/dist/ep-lib-ts.umd.cjs +1005 -0
  42. package/dist/index.d.ts +37 -1
  43. package/dist/{ep-lib-ts.css → style.css} +1 -1
  44. package/package.json +25 -23
  45. package/src/components/basics/EpBadge.vue +48 -0
  46. package/src/components/basics/EpBtn.vue +100 -0
  47. package/src/components/basics/EpCard.vue +95 -0
  48. package/src/components/basics/EpChip.vue +81 -0
  49. package/src/components/basics/EpDivider.vue +40 -0
  50. package/src/components/basics/EpFlex.vue +42 -0
  51. package/src/components/basics/EpIcon.vue +25 -0
  52. package/src/components/basics/EpImg.vue +59 -0
  53. package/src/components/basics/EpSection.vue +238 -0
  54. package/src/components/basics/EpSpinner.vue +47 -0
  55. package/src/components/basics/EpTable.vue +33 -0
  56. package/src/components/basics/EpText.vue +85 -0
  57. package/src/components/charts/EpBarChart.vue +82 -0
  58. package/src/components/charts/EpLineChart.vue +92 -0
  59. package/src/components/charts/EpPieChart.vue +8 -0
  60. package/src/components/educationals/EpEdu.vue +93 -0
  61. package/src/components/educationals/EpReading.vue +234 -0
  62. package/src/components/educationals/EpScope.vue +25 -0
  63. package/src/components/forms/EpCheckbox.vue +49 -0
  64. package/src/components/forms/EpInput.vue +178 -0
  65. package/src/components/forms/EpRadio.vue +72 -0
  66. package/src/components/forms/EpSelect.vue +145 -0
  67. package/src/components/forms/EpSwitch.vue +58 -0
  68. package/src/components/forms/EpTextarea.vue +79 -0
  69. package/src/components/forms/EpToggle.vue +97 -0
  70. package/src/components/interactions/EpAccordeon.vue +88 -0
  71. package/src/components/interactions/EpContentSlider.vue +12 -0
  72. package/src/components/interactions/EpModal.vue +117 -0
  73. package/src/components/interactions/EpQuestion.vue +8 -0
  74. package/src/components/interactions/EpTabs.vue +10 -0
  75. package/src/components/medias/EpAudio.vue +83 -0
  76. package/src/components/medias/EpCarousel.vue +84 -0
  77. package/src/components/medias/EpIframe.vue +57 -0
  78. package/src/components/medias/EpKatex.vue +75 -0
  79. package/src/components/medias/EpLink.vue +62 -0
  80. package/src/components/medias/EpSoftware.vue +89 -0
  81. package/src/components/medias/EpSvg.vue +8 -0
  82. package/src/components/medias/EpTerm.vue +145 -0
  83. package/src/components/medias/EpTimeLine.vue +8 -0
  84. package/src/components/medias/EpVideo.vue +77 -0
  85. package/src/components/medias/EpVideoPanopto.vue +62 -0
  86. package/src/components/signages/EpAlert.vue +70 -0
  87. package/src/components/signages/EpHeader.vue +223 -0
  88. package/src/components/signages/EpQuote.vue +48 -0
  89. package/src/components/tools/BgAudio.vue +51 -0
  90. package/src/components/tools/DisplayBox.vue +37 -0
  91. package/dist/components/basics/EpBadge.vue.d.ts.map +0 -1
  92. package/dist/components/basics/EpBtn.vue.d.ts.map +0 -1
  93. package/dist/components/basics/EpCard.vue.d.ts.map +0 -1
  94. package/dist/components/basics/EpChip.vue.d.ts.map +0 -1
  95. package/dist/components/basics/EpDivider.vue.d.ts.map +0 -1
  96. package/dist/components/basics/EpFlex.vue.d.ts.map +0 -1
  97. package/dist/components/basics/EpIcon.vue.d.ts.map +0 -1
  98. package/dist/components/basics/EpImg.vue.d.ts.map +0 -1
  99. package/dist/components/basics/EpSection.vue.d.ts.map +0 -1
  100. package/dist/components/basics/EpSpinner.vue.d.ts.map +0 -1
  101. package/dist/components/basics/EpTable.vue.d.ts.map +0 -1
  102. package/dist/components/basics/EpText.vue.d.ts.map +0 -1
  103. package/dist/components/charts/EpBarChart.vue.d.ts.map +0 -1
  104. package/dist/components/charts/EpLineChart.vue.d.ts.map +0 -1
  105. package/dist/components/charts/EpPieChart.vue.d.ts.map +0 -1
  106. package/dist/components/educationals/EpEdu.vue.d.ts.map +0 -1
  107. package/dist/components/educationals/EpReading.vue.d.ts.map +0 -1
  108. package/dist/components/educationals/EpScope.vue.d.ts.map +0 -1
  109. package/dist/components/index.d.ts +0 -38
  110. package/dist/components/interactions/EpAccordeon.vue.d.ts.map +0 -1
  111. package/dist/components/interactions/EpContentSlider.vue.d.ts.map +0 -1
  112. package/dist/components/interactions/EpModal.vue.d.ts.map +0 -1
  113. package/dist/components/interactions/EpQuestion.vue.d.ts.map +0 -1
  114. package/dist/components/main.d.ts +0 -7
  115. package/dist/components/medias/EpAudio.vue.d.ts.map +0 -1
  116. package/dist/components/medias/EpCarousel.vue.d.ts.map +0 -1
  117. package/dist/components/medias/EpIframe.vue.d.ts.map +0 -1
  118. package/dist/components/medias/EpKatex.vue.d.ts.map +0 -1
  119. package/dist/components/medias/EpLink.vue.d.ts.map +0 -1
  120. package/dist/components/medias/EpLinkVersion.vue.d.ts +0 -3
  121. package/dist/components/medias/EpLinkVersion.vue.d.ts.map +0 -1
  122. package/dist/components/medias/EpResource.vue.d.ts +0 -3
  123. package/dist/components/medias/EpResource.vue.d.ts.map +0 -1
  124. package/dist/components/medias/EpSoftware.vue.d.ts.map +0 -1
  125. package/dist/components/medias/EpSvg.vue.d.ts.map +0 -1
  126. package/dist/components/medias/EpTerm.vue.d.ts.map +0 -1
  127. package/dist/components/medias/EpTimeLine.vue.d.ts.map +0 -1
  128. package/dist/components/medias/EpVideo.vue.d.ts.map +0 -1
  129. package/dist/components/medias/EpVideoPanopto.vue.d.ts.map +0 -1
  130. package/dist/components/signages/EpAlert.vue.d.ts.map +0 -1
  131. package/dist/components/signages/EpHeader.vue.d.ts.map +0 -1
  132. package/dist/components/signages/EpQuote.vue.d.ts.map +0 -1
  133. package/dist/components/tools/BgAudio.vue.d.ts.map +0 -1
  134. package/dist/components/tools/DisplayBox.vue.d.ts.map +0 -1
  135. package/dist/ep-lib-ts.cjs.js +0 -984
  136. package/dist/ep-lib-ts.es.js +0 -22617
  137. package/dist/ep-lib-ts.umd.js +0 -985
@@ -0,0 +1,77 @@
1
+ <script setup lang="ts">
2
+ import {ref, computed, toRefs} from 'vue'
3
+ //types with capital letter, object styles in lowercase
4
+ import { MediaVariants } from "../../types/Medias";
5
+ import { isHtml } from '../../composables/isHtml';
6
+ import {useMarkdown} from '../../composables/useMarkdown'
7
+ import { mdiVideo } from "@mdi/js";
8
+ //import { useMediaControls } from '@vueuse/core'
9
+ import EpEdu from '../educationals/EpEdu.vue'
10
+
11
+ interface Props{
12
+ src:string;
13
+ title?:string;
14
+ intentions?:string;
15
+ credits?:string;
16
+ mandateLevel?:string | null;
17
+ labelIntentions?:string;
18
+ type?:MediaVariants;
19
+ hideIcon?:boolean;
20
+ }
21
+
22
+ const props = withDefaults(defineProps<Props>(),{
23
+ labelIntentions:"Intentions d'écoute",
24
+ type:'base',
25
+ hideIcon:false,
26
+ })
27
+
28
+ //only to make custum video player
29
+ const video = ref<HTMLVideoElement>()
30
+
31
+ const isVideoFormat = computed(()=>{
32
+ if(props.src.endsWith('.mp4') || props.src.endsWith('.ogg') || props.src.endsWith('.webm')){
33
+ return true
34
+ }
35
+ return false
36
+ })
37
+
38
+ const vimeoUrl = computed(()=> {
39
+ const url = props.src
40
+ if(!isVideoFormat.value && url.includes("https://vimeo.com/")){
41
+ return url.replace("https://vimeo.com/", "https://player.vimeo.com/video/")
42
+ }
43
+ return url
44
+ })
45
+
46
+ const renderText = computed(()=>{
47
+ if(!props.intentions){
48
+ return null
49
+ }
50
+ if(!isHtml(props.intentions)){
51
+ return useMarkdown(props.intentions)
52
+ }
53
+ return props.intentions
54
+ })
55
+ //controls
56
+ //const controls = useMediaControls(video, {src:props.src})
57
+ const {src, title, hideIcon, type} = toRefs(props)
58
+
59
+ </script>
60
+
61
+ <template>
62
+
63
+ <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiVideo" :mandateLevel="mandateLevel">
64
+ <template #intentions v-if="renderText">
65
+ <div v-html="renderText" ></div>
66
+ </template>
67
+ <template #content>
68
+ <div class="max-w-screen-sm mx-auto">
69
+ <video v-if="isVideoFormat" ref="video" controls :src="src" width="640" controlsList="nodownload"></video>
70
+ <iframe v-else :src="vimeoUrl" width="100%" height="360" frameborder="0" allowfullscreen></iframe>
71
+ </div>
72
+ </template>
73
+ <!-- <template #actions>
74
+ <EpBtn :color="type=='base'?'text-gray-700':'text-white'" :type="type">[Repair btn style... to change]</EpBtn>
75
+ </template> -->
76
+ </EpEdu>
77
+ </template>
@@ -0,0 +1,62 @@
1
+ <script setup lang="ts">
2
+ import { computed, toRefs} from 'vue'
3
+ //types with capital letter, object styles in lowercase
4
+ import { MediaVariants } from "../../types/Medias";
5
+ import { isHtml } from '../../composables/isHtml';
6
+ import {useMarkdown} from '../../composables/useMarkdown'
7
+ import { mdiVideo } from "@mdi/js";
8
+ //import { useMediaControls } from '@vueuse/core'
9
+ import EpEdu from '../educationals/EpEdu.vue'
10
+
11
+ interface Props{
12
+ src:string;
13
+ title?:string;
14
+ intentions?:string;
15
+ credits?:string;
16
+ mandateLevel?:string | null;
17
+ labelIntentions?:string;
18
+ type?:MediaVariants;
19
+ hideIcon?:boolean;
20
+ }
21
+
22
+ const props = withDefaults(defineProps<Props>(),{
23
+ labelIntentions:"Intentions d'écoute",
24
+ type:'base',
25
+ hideIcon:false,
26
+ })
27
+
28
+
29
+
30
+ const renderText = computed(()=>{
31
+ if(!props.intentions){
32
+ return null
33
+ }
34
+ if(!isHtml(props.intentions)){
35
+ return useMarkdown(props.intentions)
36
+ }
37
+ return props.intentions
38
+ })
39
+
40
+ //controls
41
+ //const controls = useMediaControls(video, {src:props.src})
42
+
43
+ const {src, title, hideIcon, type} = toRefs(props)
44
+
45
+ </script>
46
+
47
+ <template>
48
+
49
+ <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiVideo" :mandateLevel="mandateLevel">
50
+ <template #intentions v-if="renderText">
51
+ <div v-html="renderText" ></div>
52
+ </template>
53
+ <template #content>
54
+ <div class="max-w-screen-sm mx-auto">
55
+ <iframe :src="src" width="100%" height="360" frameborder="0" allowfullscreen></iframe>
56
+ </div>
57
+ </template>
58
+ <!-- <template #actions>
59
+ <EpBtn :color="type=='base'?'text-gray-700':'text-white'" :type="type">[Repair btn style... to change]</EpBtn>
60
+ </template> -->
61
+ </EpEdu>
62
+ </template>
@@ -0,0 +1,70 @@
1
+ <script setup lang="ts">
2
+ import { toRefs, computed } from "vue";
3
+ import EpDivider from "../basics/EpDivider.vue";
4
+ import EpIcon from "../basics/EpIcon.vue";
5
+ import EpAccordeon from "../interactions/EpAccordeon.vue";
6
+ ///types with Capital letters... object with styles same name in lowercase
7
+ import { TypeAlert, typeAlert } from "../../types/Alert";
8
+ import {useIcons} from '../../composables/useIcons'
9
+
10
+ interface Props {
11
+ type?:TypeAlert;
12
+ title?: string | null;
13
+ outlined?:boolean;
14
+ noIcon?:boolean;
15
+ icon?:string | null
16
+ compact?:boolean
17
+ }
18
+
19
+ const props = withDefaults(defineProps<Props>(), {
20
+ type:'base',
21
+ title: null,
22
+ outlined:false,
23
+ noIcon:false,
24
+ icon:null
25
+ });
26
+
27
+ const isOutlined = computed(()=>{
28
+ if(props.outlined){
29
+ return 'outlined'
30
+ }
31
+ return 'default'
32
+ })
33
+
34
+ const styles = computed(()=>{
35
+ return `${typeAlert[props.type]?.[isOutlined.value]}`
36
+ })
37
+
38
+ const icon = computed(()=>{
39
+ let icon = useIcons[props.type].icon
40
+ if(props.noIcon){
41
+ return null
42
+ }
43
+ if(props.icon){
44
+ return props.icon
45
+ }
46
+ return icon
47
+ })
48
+
49
+ const { title, compact, type, outlined } = toRefs(props);
50
+
51
+ </script>
52
+
53
+ <template>
54
+ <div :class="`flex p-4 rounded shadow-md m-2 ${styles}`" v-if="!compact">
55
+ <div v-if="icon" class="flex items-center justify-center w-1/12">
56
+ <EpIcon :size="40" :icon-path="icon"></EpIcon>
57
+ </div>
58
+ <div :class="`${icon?'w-11/12':'w-full'} flex items-center`">
59
+ <div class="container">
60
+ <h3 v-if="title" class="text-left text-2xl font-bold">{{ title }}</h3>
61
+ <EpDivider v-if="title" size="border"></EpDivider>
62
+ <slot>
63
+ </slot>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ <EpAccordeon :type="type" :outlined="outlined" :icon="icon" :title="title" v-else>
68
+ <slot></slot>
69
+ </EpAccordeon>
70
+ </template>
@@ -0,0 +1,223 @@
1
+ <script setup lang="ts">
2
+ import { toRefs, computed } from "vue";
3
+ import EpIcon from "../basics/EpIcon.vue";
4
+
5
+ import EpChip from "../basics/EpChip.vue";
6
+ import useColors from "../../composables/useColors";
7
+ import { mdiHome } from "@mdi/js";
8
+ import { mdiCast } from "@mdi/js";
9
+ import { mdiTimerOutline } from "@mdi/js";
10
+ import { mdiChairSchool } from "@mdi/js";
11
+ import { mdiChevronDown } from "@mdi/js";
12
+
13
+ interface Props {
14
+ title?: string | null;
15
+ subtitle?: string | null;
16
+ icon?: string | null;
17
+ color?: string | null;
18
+ taxonomyLevel?: string | null;
19
+ courseCode?: string | null;
20
+ courseTitle?: string | null;
21
+ height?: string | null;
22
+ src?: string | null;
23
+ synchrone?: boolean;
24
+ duration?: string | null;
25
+ assessment?: string | null;
26
+ }
27
+
28
+ // type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
29
+
30
+ const props = withDefaults(defineProps<Props>(), {
31
+ title: null,
32
+ icon: null,
33
+ color: null,
34
+ src: null,
35
+ height: null,
36
+ synchrone: false,
37
+ duration: null,
38
+ assessment: null,
39
+ });
40
+
41
+ const colorText = computed(() => {
42
+ return props.color;
43
+ });
44
+
45
+ const styles = computed(() => {
46
+ return `
47
+ flex
48
+ flex-col
49
+ items-start
50
+ overflow-hidden
51
+ w-full
52
+ ${props.height !== null ? "min-h-screen" : "h-96"}
53
+ bg-cover
54
+ bg-blue-500
55
+ bg-blend-multiply `;
56
+ });
57
+
58
+ const bgImg = computed(() => {
59
+ if (props.src) {
60
+ return props.src;
61
+ }
62
+ return `https://picsum.photos/800/480?random`;
63
+ });
64
+
65
+ const { title, icon, color, src, height } = toRefs(props);
66
+ </script>
67
+
68
+ <template>
69
+ <section class="items-center overflow-hidden bg-white">
70
+ <div :class="styles" :style="`background-image:url('${bgImg}')`">
71
+ <div class="flex mt-2 place-self-end gap-2 lg:flex-row">
72
+ <EpChip v-if="synchrone" color="secondary" :prependIcon="mdiCast"
73
+ >Synchrone</EpChip
74
+ >
75
+ <EpChip v-if="duration" color="secondary" :prependIcon="mdiTimerOutline"
76
+ > {{ duration }}</EpChip
77
+ >
78
+ <EpChip
79
+ v-if="assessment"
80
+ color="secondary"
81
+ :prependIcon="mdiChairSchool"
82
+ >Formatif</EpChip
83
+ >
84
+ </div>
85
+ <div id="title-content" class="w-full grow flex items-end">
86
+ <div
87
+ class="container flex flex-col px-8 py-24 mx-auto max-w-7xl md:flex-row lg:px-16"
88
+ >
89
+ <div
90
+ v-if="title"
91
+ class="p-4 md:items-center backdrop-blur-md backdrop-brightness-50 backdrop-opacity-75 rounded-xl"
92
+ >
93
+ <div class="text-center md:text-left">
94
+ <div>
95
+ <p
96
+ class="text-2xl font-medium tracking-tight text-white sm:text-4xl"
97
+ >
98
+ {{ title }}
99
+ </p>
100
+ <p
101
+ class="max-w-xl mt-4 text-xl tracking-tight text-white contrast-50"
102
+ >
103
+ {{ subtitle }}
104
+ </p>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ <div
111
+ id="action"
112
+ v-if="props.height !== null"
113
+ class="place-self-center pb-12 animate-bounce"
114
+ >
115
+ <div class="mx-auto w-12 bg-white rounded-full p-2">
116
+ <EpIcon :iconPath="mdiChevronDown" size="32"></EpIcon>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- <div>
122
+ <div class="px-5 pt-6 mx-auto lg:max-w-6xl lg:px-0">
123
+ <dl class="grid grid-cols-1 gap-6 space-y-0 lg:gap-24 lg:grid-cols-3">
124
+ <div>
125
+ <div>
126
+ <p class="mt-5 text-lg font-semibold leading-6 text-black">
127
+ Developer experience
128
+ </p>
129
+ </div>
130
+ <div class="mt-2 text-base text-gray-600">
131
+ Do what you think is right. Don't let people make the decision of
132
+ right or wrong for you.
133
+ </div>
134
+ </div>
135
+ <div>
136
+ <div>
137
+ <p class="mt-5 text-lg font-semibold leading-6 text-black">
138
+ Designers go-to app
139
+ </p>
140
+ </div>
141
+ <div class="mt-2 text-base text-gray-600">
142
+ Only you can take inner freedom away from yourself, or give it to
143
+ yourself. Nobody else can
144
+ </div>
145
+ </div>
146
+ <div>
147
+ <div>
148
+ <p class="mt-5 text-lg font-semibold leading-6 text-black">
149
+ Easy onboarding
150
+ </p>
151
+ </div>
152
+ <div class="mt-2 text-base text-gray-600">
153
+ Your greatest self has been waiting your whole life; don't make it
154
+ wait any longer
155
+ </div>
156
+ </div>
157
+ </dl>
158
+ </div>
159
+ </div> -->
160
+ </section>
161
+
162
+ <section>
163
+ <div class="items-center pb-12 max-w-7xl lg:pb-24">
164
+ <div class="justify-center w-full mx-auto bg-stone-100">
165
+ <nav class="flex py-3 border-y" aria-label="Breadcrumb">
166
+ <ol role="list" class="flex items-center pl-2 space-x-2">
167
+ <li>
168
+ <div class="flex items-center">
169
+ <a
170
+ href="#"
171
+ class="inline-flex items-center text-sm font-medium text-gray-500 duration-200 hover:text-gray-700 hover:scale-95"
172
+ >
173
+ <!-- <ion-icon
174
+ class="flex-shrink-0 w-4 h-4 md hydrated"
175
+ name="home-outline"
176
+ role="img"
177
+ aria-label="home outline"
178
+ ></ion-icon> -->
179
+ <EpIcon :iconPath="mdiHome" size="22"></EpIcon>
180
+ <span class="ml-2"> Parent </span>
181
+ </a>
182
+ </div>
183
+ </li>
184
+ <li>
185
+ <div class="flex items-center">
186
+ <span class="flex-shrink-0 w-5 h-5 text-gray-300"> / </span>
187
+ <a
188
+ href="#"
189
+ class="ml-4 text-sm font-medium text-gray-500 hover:scale-95 hover:text-gray-700"
190
+ >
191
+ Parent
192
+ </a>
193
+ </div>
194
+ </li>
195
+ <li>
196
+ <div class="flex items-center">
197
+ <span class="flex-shrink-0 w-5 h-5 text-gray-300"> / </span>
198
+ <a
199
+ href="#"
200
+ class="ml-4 text-sm font-medium text-gray-500 hover:scale-95 hover:text-gray-700"
201
+ >
202
+ Parent
203
+ </a>
204
+ </div>
205
+ </li>
206
+ <li>
207
+ <div class="flex items-center">
208
+ <span class="flex-shrink-0 w-5 h-5 text-gray-300"> / </span>
209
+ <a
210
+ href="#"
211
+ class="ml-4 text-sm font-medium text-blue-500 hover:scale-95 hover:text-gray-700"
212
+ aria-current="page"
213
+ >
214
+ Current
215
+ </a>
216
+ </div>
217
+ </li>
218
+ </ol>
219
+ </nav>
220
+ </div>
221
+ </div>
222
+ </section>
223
+ </template>
@@ -0,0 +1,48 @@
1
+ <script setup lang="ts">
2
+ import {toRefs} from 'vue'
3
+ import EpCard from "../basics/EpCard.vue";
4
+ import EpDivider from "../basics/EpDivider.vue";
5
+ import EpIcon from "../basics/EpIcon.vue";
6
+ import useColors from "../../composables/useColors";
7
+ import { mdiFormatQuoteOpen } from "@mdi/js";
8
+ import { mdiFormatQuoteClose } from '@mdi/js';
9
+
10
+ interface Props {
11
+ name?:string | null;
12
+ src?:string | null;
13
+ quotes?:boolean;
14
+ }
15
+
16
+ const props = withDefaults(defineProps<Props>(), {
17
+ name:null,
18
+ src:null,
19
+ quotes:false
20
+ })
21
+
22
+ const {name, src, quotes} = toRefs(props)
23
+
24
+ </script>
25
+
26
+ <template>
27
+ <EpCard density="compact">
28
+ <div
29
+ class="flex flex-wrap rounded-lg bg-white"
30
+ >
31
+ <img
32
+ v-if="src"
33
+ class="h-96 w-full rounded-t-lg object-cover lg:h-auto lg:w-48 lg:rounded-none lg:rounded-l-lg"
34
+ :src="src"
35
+ alt="Image of quote"
36
+ />
37
+ <div class="p-6 flex-1">
38
+ <slot></slot>
39
+ <template v-if="name">
40
+ <EpDivider size="border"></EpDivider>
41
+ <p class="text-xs italic text-neutral-500">
42
+ {{ name }}
43
+ </p>
44
+ </template>
45
+ </div>
46
+ </div>
47
+ </EpCard>
48
+ </template>
@@ -0,0 +1,51 @@
1
+ <script setup lang="ts">
2
+ const props = withDefaults(defineProps<{
3
+ fill?: string;
4
+ }>(), {
5
+ fill: "fill-primary"
6
+ })
7
+ </script>
8
+ <template>
9
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
10
+ y="0px" viewBox="0 0 640 360" style="enable-background:new 0 0 640 360;" xml:space="preserve">
11
+
12
+ <pattern y="-20" width="150" height="100" patternUnits="userSpaceOnUse" id="New_Pattern" viewBox="8 -107.8 150 100"
13
+ style="overflow:visible;">
14
+ <g>
15
+ <rect x="8" y="-107.8" style="fill: none;" width="150" height="100" />
16
+ <g style="opacity:0.1 ;">
17
+ <path d="M159.8-15.5c3.5,0.8,6.2,4,6.2,7.8s-2.7,7-6.2,7.8v-1.8c2.6-0.8,4.4-3.1,4.4-5.9s-1.9-5.2-4.4-5.9V-15.5 M162-7.8
18
+ c0,1.6-0.9,2.9-2.2,3.5v-7.1C161.1-10.7,162-9.3,162-7.8 M153.5-10.4l4.4-4.4v14.2l-4.4-4.4H150v-5.3H153.5z" />
19
+ </g>
20
+ <g style="opacity:0.1 ;">
21
+ <path d="M9.8-15.5c3.5,0.8,6.2,4,6.2,7.8s-2.7,7-6.2,7.8v-1.8c2.6-0.8,4.4-3.1,4.4-5.9s-1.9-5.2-4.4-5.9V-15.5 M12-7.8
22
+ c0,1.6-0.9,2.9-2.2,3.5v-7.1C11.1-10.7,12-9.3,12-7.8 M3.5-10.4L8-14.8v14.2L3.5-5.1H0v-5.3H3.5z" />
23
+ </g>
24
+ <g style="opacity:0.1 ;">
25
+ <path d="M159.8-115.5c3.5,0.8,6.2,4,6.2,7.8s-2.7,7-6.2,7.8v-1.8c2.6-0.8,4.4-3.1,4.4-5.9s-1.9-5.2-4.4-5.9V-115.5 M162-107.8
26
+ c0,1.6-0.9,2.9-2.2,3.5v-7.1C161.1-110.7,162-109.3,162-107.8 M153.5-110.4l4.4-4.4v14.2l-4.4-4.4H150v-5.3H153.5z" />
27
+ </g>
28
+ <g style="opacity:0.1 ;">
29
+ <path d="M84.8-65.5c3.5,0.8,6.2,4,6.2,7.8s-2.7,7-6.2,7.8v-1.8c2.6-0.8,4.4-3.1,4.4-5.9c0-2.8-1.9-5.2-4.4-5.9V-65.5 M87-57.8
30
+ c0,1.6-0.9,2.9-2.2,3.5v-7.1C86.1-60.7,87-59.3,87-57.8 M78.5-60.4l4.4-4.4v14.2l-4.4-4.4H75v-5.3H78.5z" />
31
+ </g>
32
+ <g style="opacity:0.1 ;">
33
+ <path d="M9.8-115.5c3.5,0.8,6.2,4,6.2,7.8s-2.7,7-6.2,7.8v-1.8c2.6-0.8,4.4-3.1,4.4-5.9s-1.9-5.2-4.4-5.9V-115.5 M12-107.8
34
+ c0,1.6-0.9,2.9-2.2,3.5v-7.1C11.1-110.7,12-109.3,12-107.8 M3.5-110.4l4.4-4.4v14.2l-4.4-4.4H0v-5.3H3.5z" />
35
+ </g>
36
+ </g>
37
+ </pattern>
38
+ <g>
39
+ <rect :class="props.fill" width="640" height="360" />
40
+ <path style="fill:url(#New_Pattern);" d="M639,1v358H1V1H639 M640,0H0v360h640V0L640,0z" />
41
+ </g>
42
+ <g>
43
+ <rect x="0.5" y="0.5" style="fill:url(#New_Pattern);" width="639" height="359" />
44
+ </g>
45
+ <g>
46
+ <path style="fill: white;" d="M310.7,114.7c-31,4.4-53.2,32.4-53.2,63.7v46.8c0,11.5,9.3,20.8,20.8,20.8h20.8v-55.6h-27.8v-12
47
+ c0-24.9,17.9-47.1,42.5-50.1c29.6-3.6,54.7,19.4,54.7,48.3v13.9h-27.8V246h20.8c11.5,0,20.8-9.3,20.8-20.8v-48.6
48
+ C382.5,138.7,349.4,109.1,310.7,114.7z" />
49
+ </g>
50
+ </svg>
51
+ </template>
@@ -0,0 +1,37 @@
1
+ <script setup lang="ts">
2
+ import { ref, computed } from 'vue'
3
+ import { onClickOutside, useEventListener } from '@vueuse/core'
4
+ const menu = ref()
5
+ const isOpen = ref()
6
+
7
+ onClickOutside(menu, (event) => {
8
+ isOpen.value = false
9
+ })
10
+ useEventListener('keydown', (e) => {
11
+ if (e.key === 'Escape' && isOpen)
12
+ isOpen.value = false
13
+ })
14
+
15
+ function open() {
16
+ return isOpen.value = true
17
+ }
18
+
19
+ function close() {
20
+ return isOpen.value = false
21
+ }
22
+
23
+ const classOpen = computed(()=> {
24
+ return isOpen.value?`absolute w-[32rem] -left-96 z-40`:`hidden`
25
+ })
26
+
27
+ </script>
28
+
29
+ <template>
30
+ <div class="relative">
31
+ <slot :open="open" />
32
+ <div ref="menu" :class="classOpen">
33
+ <slot name="menu" :is-open="isOpen" :close="close" />
34
+ </div>
35
+ </div>
36
+
37
+ </template>
@@ -1 +0,0 @@
1
- {"version":3,"file":"EpBadge.vue.d.ts","sourceRoot":"","sources":["../../../src/components/basics/EpBadge.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,+GAA+G,CAAC;AACtI,cAAc,+GAA+G,CAAC;AAC9H,eAAe,SAAS,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"EpBtn.vue.d.ts","sourceRoot":"","sources":["../../../src/components/basics/EpBtn.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,6GAA6G,CAAC;AACpI,cAAc,6GAA6G,CAAC;AAC5H,eAAe,SAAS,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"EpCard.vue.d.ts","sourceRoot":"","sources":["../../../src/components/basics/EpCard.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,8GAA8G,CAAC;AACrI,cAAc,8GAA8G,CAAC;AAC7H,eAAe,SAAS,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"EpChip.vue.d.ts","sourceRoot":"","sources":["../../../src/components/basics/EpChip.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,8GAA8G,CAAC;AACrI,cAAc,8GAA8G,CAAC;AAC7H,eAAe,SAAS,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"EpDivider.vue.d.ts","sourceRoot":"","sources":["../../../src/components/basics/EpDivider.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,iHAAiH,CAAC;AACxI,cAAc,iHAAiH,CAAC;AAChI,eAAe,SAAS,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"EpFlex.vue.d.ts","sourceRoot":"","sources":["../../../src/components/basics/EpFlex.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,8GAA8G,CAAC;AACrI,cAAc,8GAA8G,CAAC;AAC7H,eAAe,SAAS,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"EpIcon.vue.d.ts","sourceRoot":"","sources":["../../../src/components/basics/EpIcon.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,8GAA8G,CAAC;AACrI,cAAc,8GAA8G,CAAC;AAC7H,eAAe,SAAS,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"EpImg.vue.d.ts","sourceRoot":"","sources":["../../../src/components/basics/EpImg.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,6GAA6G,CAAC;AACpI,cAAc,6GAA6G,CAAC;AAC5H,eAAe,SAAS,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"EpSection.vue.d.ts","sourceRoot":"","sources":["../../../src/components/basics/EpSection.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,iHAAiH,CAAC;AACxI,cAAc,iHAAiH,CAAC;AAChI,eAAe,SAAS,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"EpSpinner.vue.d.ts","sourceRoot":"","sources":["../../../src/components/basics/EpSpinner.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,iHAAiH,CAAC;AACxI,cAAc,iHAAiH,CAAC;AAChI,eAAe,SAAS,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"EpTable.vue.d.ts","sourceRoot":"","sources":["../../../src/components/basics/EpTable.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,+GAA+G,CAAC;AACtI,cAAc,+GAA+G,CAAC;AAC9H,eAAe,SAAS,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"EpText.vue.d.ts","sourceRoot":"","sources":["../../../src/components/basics/EpText.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,8GAA8G,CAAC;AACrI,cAAc,8GAA8G,CAAC;AAC7H,eAAe,SAAS,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"EpBarChart.vue.d.ts","sourceRoot":"","sources":["../../../src/components/charts/EpBarChart.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,kHAAkH,CAAC;AACzI,cAAc,kHAAkH,CAAC;AACjI,eAAe,SAAS,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"EpLineChart.vue.d.ts","sourceRoot":"","sources":["../../../src/components/charts/EpLineChart.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,mHAAmH,CAAC;AAC1I,cAAc,mHAAmH,CAAC;AAClI,eAAe,SAAS,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"EpPieChart.vue.d.ts","sourceRoot":"","sources":["../../../src/components/charts/EpPieChart.vue"],"names":[],"mappings":";AAeA,wBAA4E"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"EpEdu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/educationals/EpEdu.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,mHAAmH,CAAC;AAC1I,cAAc,mHAAmH,CAAC;AAClI,eAAe,SAAS,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"EpReading.vue.d.ts","sourceRoot":"","sources":["../../../src/components/educationals/EpReading.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,uHAAuH,CAAC;AAC9I,cAAc,uHAAuH,CAAC;AACtI,eAAe,SAAS,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"EpScope.vue.d.ts","sourceRoot":"","sources":["../../../src/components/educationals/EpScope.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,qHAAqH,CAAC;AAC5I,cAAc,qHAAqH,CAAC;AACpI,eAAe,SAAS,CAAC"}