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.
- package/dist/components/basics/EpBadge.vue.d.ts +38 -4
- package/dist/components/basics/EpBtn.vue.d.ts +108 -4
- package/dist/components/basics/EpCard.vue.d.ts +95 -4
- package/dist/components/basics/EpChip.vue.d.ts +72 -4
- package/dist/components/basics/EpDivider.vue.d.ts +51 -4
- package/dist/components/basics/EpFlex.vue.d.ts +9 -4
- package/dist/components/basics/EpIcon.vue.d.ts +37 -4
- package/dist/components/basics/EpImg.vue.d.ts +76 -4
- package/dist/components/basics/EpSection.vue.d.ts +84 -4
- package/dist/components/basics/EpSpinner.vue.d.ts +32 -4
- package/dist/components/basics/EpTable.vue.d.ts +24 -4
- package/dist/components/basics/EpText.vue.d.ts +30 -4
- package/dist/components/charts/EpBarChart.vue.d.ts +82 -4
- package/dist/components/charts/EpLineChart.vue.d.ts +82 -4
- package/dist/components/charts/EpPieChart.vue.d.ts +1 -2
- package/dist/components/educationals/EpEdu.vue.d.ts +80 -4
- package/dist/components/educationals/EpReading.vue.d.ts +151 -4
- package/dist/components/educationals/EpScope.vue.d.ts +14 -4
- package/dist/components/interactions/EpAccordeon.vue.d.ts +53 -4
- package/dist/components/interactions/EpContentSlider.vue.d.ts +2 -5
- package/dist/components/interactions/EpModal.vue.d.ts +70 -5
- package/dist/components/interactions/EpQuestion.vue.d.ts +1 -2
- package/dist/components/interactions/EpTabs.vue.d.ts +2 -0
- package/dist/components/medias/EpAudio.vue.d.ts +79 -4
- package/dist/components/medias/EpCarousel.vue.d.ts +31 -4
- package/dist/components/medias/EpIframe.vue.d.ts +58 -4
- package/dist/components/medias/EpKatex.vue.d.ts +51 -4
- package/dist/components/medias/EpLink.vue.d.ts +73 -4
- package/dist/components/medias/EpSoftware.vue.d.ts +88 -4
- package/dist/components/medias/EpSvg.vue.d.ts +1 -2
- package/dist/components/medias/EpTerm.vue.d.ts +80 -4
- package/dist/components/medias/EpTimeLine.vue.d.ts +1 -2
- package/dist/components/medias/EpVideo.vue.d.ts +64 -4
- package/dist/components/medias/EpVideoPanopto.vue.d.ts +64 -4
- package/dist/components/signages/EpAlert.vue.d.ts +63 -4
- package/dist/components/signages/EpHeader.vue.d.ts +101 -4
- package/dist/components/signages/EpQuote.vue.d.ts +39 -4
- package/dist/components/tools/BgAudio.vue.d.ts +14 -4
- package/dist/components/tools/DisplayBox.vue.d.ts +17 -4
- package/dist/ep-lib-ts.js +27411 -0
- package/dist/ep-lib-ts.umd.cjs +1005 -0
- package/dist/index.d.ts +37 -1
- package/dist/{ep-lib-ts.css → style.css} +1 -1
- package/package.json +25 -23
- package/src/components/basics/EpBadge.vue +48 -0
- package/src/components/basics/EpBtn.vue +100 -0
- package/src/components/basics/EpCard.vue +95 -0
- package/src/components/basics/EpChip.vue +81 -0
- package/src/components/basics/EpDivider.vue +40 -0
- package/src/components/basics/EpFlex.vue +42 -0
- package/src/components/basics/EpIcon.vue +25 -0
- package/src/components/basics/EpImg.vue +59 -0
- package/src/components/basics/EpSection.vue +238 -0
- package/src/components/basics/EpSpinner.vue +47 -0
- package/src/components/basics/EpTable.vue +33 -0
- package/src/components/basics/EpText.vue +85 -0
- package/src/components/charts/EpBarChart.vue +82 -0
- package/src/components/charts/EpLineChart.vue +92 -0
- package/src/components/charts/EpPieChart.vue +8 -0
- package/src/components/educationals/EpEdu.vue +93 -0
- package/src/components/educationals/EpReading.vue +234 -0
- package/src/components/educationals/EpScope.vue +25 -0
- package/src/components/forms/EpCheckbox.vue +49 -0
- package/src/components/forms/EpInput.vue +178 -0
- package/src/components/forms/EpRadio.vue +72 -0
- package/src/components/forms/EpSelect.vue +145 -0
- package/src/components/forms/EpSwitch.vue +58 -0
- package/src/components/forms/EpTextarea.vue +79 -0
- package/src/components/forms/EpToggle.vue +97 -0
- package/src/components/interactions/EpAccordeon.vue +88 -0
- package/src/components/interactions/EpContentSlider.vue +12 -0
- package/src/components/interactions/EpModal.vue +117 -0
- package/src/components/interactions/EpQuestion.vue +8 -0
- package/src/components/interactions/EpTabs.vue +10 -0
- package/src/components/medias/EpAudio.vue +83 -0
- package/src/components/medias/EpCarousel.vue +84 -0
- package/src/components/medias/EpIframe.vue +57 -0
- package/src/components/medias/EpKatex.vue +75 -0
- package/src/components/medias/EpLink.vue +62 -0
- package/src/components/medias/EpSoftware.vue +89 -0
- package/src/components/medias/EpSvg.vue +8 -0
- package/src/components/medias/EpTerm.vue +145 -0
- package/src/components/medias/EpTimeLine.vue +8 -0
- package/src/components/medias/EpVideo.vue +77 -0
- package/src/components/medias/EpVideoPanopto.vue +62 -0
- package/src/components/signages/EpAlert.vue +70 -0
- package/src/components/signages/EpHeader.vue +223 -0
- package/src/components/signages/EpQuote.vue +48 -0
- package/src/components/tools/BgAudio.vue +51 -0
- package/src/components/tools/DisplayBox.vue +37 -0
- package/dist/components/basics/EpBadge.vue.d.ts.map +0 -1
- package/dist/components/basics/EpBtn.vue.d.ts.map +0 -1
- package/dist/components/basics/EpCard.vue.d.ts.map +0 -1
- package/dist/components/basics/EpChip.vue.d.ts.map +0 -1
- package/dist/components/basics/EpDivider.vue.d.ts.map +0 -1
- package/dist/components/basics/EpFlex.vue.d.ts.map +0 -1
- package/dist/components/basics/EpIcon.vue.d.ts.map +0 -1
- package/dist/components/basics/EpImg.vue.d.ts.map +0 -1
- package/dist/components/basics/EpSection.vue.d.ts.map +0 -1
- package/dist/components/basics/EpSpinner.vue.d.ts.map +0 -1
- package/dist/components/basics/EpTable.vue.d.ts.map +0 -1
- package/dist/components/basics/EpText.vue.d.ts.map +0 -1
- package/dist/components/charts/EpBarChart.vue.d.ts.map +0 -1
- package/dist/components/charts/EpLineChart.vue.d.ts.map +0 -1
- package/dist/components/charts/EpPieChart.vue.d.ts.map +0 -1
- package/dist/components/educationals/EpEdu.vue.d.ts.map +0 -1
- package/dist/components/educationals/EpReading.vue.d.ts.map +0 -1
- package/dist/components/educationals/EpScope.vue.d.ts.map +0 -1
- package/dist/components/index.d.ts +0 -38
- package/dist/components/interactions/EpAccordeon.vue.d.ts.map +0 -1
- package/dist/components/interactions/EpContentSlider.vue.d.ts.map +0 -1
- package/dist/components/interactions/EpModal.vue.d.ts.map +0 -1
- package/dist/components/interactions/EpQuestion.vue.d.ts.map +0 -1
- package/dist/components/main.d.ts +0 -7
- package/dist/components/medias/EpAudio.vue.d.ts.map +0 -1
- package/dist/components/medias/EpCarousel.vue.d.ts.map +0 -1
- package/dist/components/medias/EpIframe.vue.d.ts.map +0 -1
- package/dist/components/medias/EpKatex.vue.d.ts.map +0 -1
- package/dist/components/medias/EpLink.vue.d.ts.map +0 -1
- package/dist/components/medias/EpLinkVersion.vue.d.ts +0 -3
- package/dist/components/medias/EpLinkVersion.vue.d.ts.map +0 -1
- package/dist/components/medias/EpResource.vue.d.ts +0 -3
- package/dist/components/medias/EpResource.vue.d.ts.map +0 -1
- package/dist/components/medias/EpSoftware.vue.d.ts.map +0 -1
- package/dist/components/medias/EpSvg.vue.d.ts.map +0 -1
- package/dist/components/medias/EpTerm.vue.d.ts.map +0 -1
- package/dist/components/medias/EpTimeLine.vue.d.ts.map +0 -1
- package/dist/components/medias/EpVideo.vue.d.ts.map +0 -1
- package/dist/components/medias/EpVideoPanopto.vue.d.ts.map +0 -1
- package/dist/components/signages/EpAlert.vue.d.ts.map +0 -1
- package/dist/components/signages/EpHeader.vue.d.ts.map +0 -1
- package/dist/components/signages/EpQuote.vue.d.ts.map +0 -1
- package/dist/components/tools/BgAudio.vue.d.ts.map +0 -1
- package/dist/components/tools/DisplayBox.vue.d.ts.map +0 -1
- package/dist/ep-lib-ts.cjs.js +0 -984
- package/dist/ep-lib-ts.es.js +0 -22617
- 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"}
|