ep-lib-ts 1.0.82 → 1.0.84
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/interactions/EpFlipCard.vue.js +1 -1
- package/dist/components/interactions/EpFlipCard.vue2.js +30 -30
- package/dist/components/interactions/EpFlipCard.vue2.js.map +1 -1
- package/dist/components/tools/TimelineItem.vue.js +1 -1
- package/dist/components/tools/TimelineItem.vue2.js +23 -12
- package/dist/components/tools/TimelineItem.vue2.js.map +1 -1
- package/dist/style.css +91 -91
- package/dist/types/TimeLine.d.ts +2 -0
- package/dist/types/TimeLine.js.map +1 -1
- package/dist/types/interactions/EpFlipCard.d.ts +11 -12
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _sfc_main from "./EpFlipCard.vue2.js";
|
|
2
2
|
/* empty css */
|
|
3
3
|
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
|
|
4
|
-
const Comp = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
4
|
+
const Comp = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-51e4a299"]]);
|
|
5
5
|
export {
|
|
6
6
|
Comp as default
|
|
7
7
|
};
|
|
@@ -30,18 +30,18 @@ const _hoisted_10 = { class: "leading-none" };
|
|
|
30
30
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
31
31
|
__name: "EpFlipCard",
|
|
32
32
|
props: {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
33
|
+
front: { default: () => ({
|
|
34
|
+
content: "",
|
|
35
|
+
bgImg: "",
|
|
36
|
+
bgColor: null,
|
|
37
|
+
textColor: null
|
|
38
|
+
}) },
|
|
39
|
+
back: { default: () => ({
|
|
40
|
+
content: "",
|
|
41
|
+
bgImg: "",
|
|
42
|
+
bgColor: null,
|
|
43
|
+
textColor: null
|
|
44
|
+
}) },
|
|
45
45
|
trigger: { default: "click" },
|
|
46
46
|
noIndicator: { type: Boolean, default: false },
|
|
47
47
|
density: { default: "default" },
|
|
@@ -65,21 +65,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
65
65
|
return props.height === "small" ? "h-72" : props.height === "medium" ? "h-96" : "h-[612px]";
|
|
66
66
|
});
|
|
67
67
|
const hasContent = computed(() => {
|
|
68
|
-
return !!props.
|
|
68
|
+
return !!props.front.content || !!props.back.content || !!props.front.title || !!props.front.subtitle || !!props.back.title || !!props.back.subtitle;
|
|
69
69
|
});
|
|
70
70
|
const darkMode = useColorMode();
|
|
71
71
|
const gradientFront = computed(() => {
|
|
72
|
-
if (!props.
|
|
72
|
+
if (!props.front.bgImg) return void 0;
|
|
73
73
|
const color = darkMode.value === "dark" ? "rgba(0,0,0,0.75)" : "rgba(255,255,255,0.8)";
|
|
74
|
-
return `linear-gradient(to bottom, ${color}, ${color}), url(${props.
|
|
74
|
+
return `linear-gradient(to bottom, ${color}, ${color}), url(${props.front.bgImg})`;
|
|
75
75
|
});
|
|
76
76
|
const gradientBack = computed(() => {
|
|
77
|
-
if (!props.
|
|
77
|
+
if (!props.back.bgImg) return void 0;
|
|
78
78
|
const color = darkMode.value === "dark" ? "rgba(0,0,0,0.75)" : "rgba(255,255,255,0.8)";
|
|
79
|
-
return `linear-gradient(to bottom, ${color}, ${color}), url(${props.
|
|
79
|
+
return `linear-gradient(to bottom, ${color}, ${color}), url(${props.back.bgImg})`;
|
|
80
80
|
});
|
|
81
81
|
return (_ctx, _cache) => {
|
|
82
|
-
var _a, _b;
|
|
82
|
+
var _a, _b, _c, _d;
|
|
83
83
|
return hasContent.value ? (openBlock(), createElementBlock("div", {
|
|
84
84
|
key: 0,
|
|
85
85
|
class: normalizeClass(`relative perspective-1000 cursor-pointer flex items-center justify-center
|
|
@@ -102,29 +102,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
102
102
|
${flipped.value ? "rotate-y-180" : ""}`)
|
|
103
103
|
}, [
|
|
104
104
|
createElementVNode("div", {
|
|
105
|
-
class: normalizeClass(`${stylesCard.value} ${!props.
|
|
105
|
+
class: normalizeClass(`${stylesCard.value} ${!props.front.bgImg && !props.front.bgColor ? "bg-surface-2 dark:bg-surface-2-dark" : ""} absolute inset-0 w-full h-full backface-hidden overflow-y-auto
|
|
106
106
|
bg-cover bg-center dark:text-white`),
|
|
107
|
-
style: normalizeStyle({ color: (_a = _ctx.
|
|
107
|
+
style: normalizeStyle({ color: (_a = _ctx.front.textColor) != null ? _a : void 0, backgroundImage: gradientFront.value, backgroundColor: _ctx.front.bgImg || !_ctx.front.bgColor ? void 0 : _ctx.front.bgColor })
|
|
108
108
|
}, [
|
|
109
|
-
_ctx.
|
|
110
|
-
createElementVNode("h3", _hoisted_2, toDisplayString(_ctx.
|
|
111
|
-
createElementVNode("h4", _hoisted_3, toDisplayString(_ctx.
|
|
109
|
+
_ctx.front.title || _ctx.front.subtitle ? (openBlock(), createElementBlock("div", _hoisted_1, [
|
|
110
|
+
createElementVNode("h3", _hoisted_2, toDisplayString(_ctx.front.title), 1),
|
|
111
|
+
createElementVNode("h4", _hoisted_3, toDisplayString(_ctx.front.subtitle), 1)
|
|
112
112
|
])) : createCommentVNode("", true),
|
|
113
113
|
createElementVNode("div", {
|
|
114
|
-
innerHTML: unref(useRenderText)(_ctx.
|
|
114
|
+
innerHTML: unref(useRenderText)((_b = _ctx.front.content) != null ? _b : "")
|
|
115
115
|
}, null, 8, _hoisted_4)
|
|
116
116
|
], 6),
|
|
117
117
|
createElementVNode("div", {
|
|
118
|
-
class: normalizeClass(`${stylesCard.value} ${!props.
|
|
118
|
+
class: normalizeClass(`${stylesCard.value} ${!props.back.bgImg && !props.back.bgColor ? "bg-surface-2 dark:bg-surface-2-dark" : ""} absolute inset-0 w-full h-full rotate-y-180 backface-hidden overflow-y-auto
|
|
119
119
|
bg-cover bg-center dark:text-white`),
|
|
120
|
-
style: normalizeStyle({ color: (
|
|
120
|
+
style: normalizeStyle({ color: (_c = _ctx.back.textColor) != null ? _c : void 0, backgroundImage: gradientBack.value, backgroundColor: _ctx.back.bgImg || !_ctx.back.bgColor ? void 0 : _ctx.back.bgColor })
|
|
121
121
|
}, [
|
|
122
|
-
_ctx.
|
|
123
|
-
createElementVNode("h3", _hoisted_6, toDisplayString(_ctx.
|
|
124
|
-
createElementVNode("h4", _hoisted_7, toDisplayString(_ctx.
|
|
122
|
+
_ctx.back.title || _ctx.back.subtitle ? (openBlock(), createElementBlock("div", _hoisted_5, [
|
|
123
|
+
createElementVNode("h3", _hoisted_6, toDisplayString(_ctx.back.title), 1),
|
|
124
|
+
createElementVNode("h4", _hoisted_7, toDisplayString(_ctx.back.subtitle), 1)
|
|
125
125
|
])) : createCommentVNode("", true),
|
|
126
126
|
createElementVNode("div", {
|
|
127
|
-
innerHTML: unref(useRenderText)(_ctx.
|
|
127
|
+
innerHTML: unref(useRenderText)((_d = _ctx.back.content) != null ? _d : "")
|
|
128
128
|
}, null, 8, _hoisted_8)
|
|
129
129
|
], 6)
|
|
130
130
|
], 2),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EpFlipCard.vue2.js","sources":["../../../src/components/interactions/EpFlipCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref} from 'vue'\n\nimport type { EpFlipCardProps } from \"~/types/interactions/EpFlipCard\";\nimport { mdiRotate360 } from '@mdi/js';\nimport EpIcon from '../basics/EpIcon.vue';\nimport { density_style } from '~/types/Card';\nimport { useColorMode } from '@vueuse/core';\nimport { useRenderText } from '~/composables/useRenderText';\n\nconst props = withDefaults(defineProps<EpFlipCardProps>(), {\n trigger
|
|
1
|
+
{"version":3,"file":"EpFlipCard.vue2.js","sources":["../../../src/components/interactions/EpFlipCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref} from 'vue'\n\nimport type { EpFlipCardProps } from \"~/types/interactions/EpFlipCard\";\nimport { mdiRotate360 } from '@mdi/js';\nimport EpIcon from '../basics/EpIcon.vue';\nimport { density_style } from '~/types/Card';\nimport { useColorMode } from '@vueuse/core';\nimport { useRenderText } from '~/composables/useRenderText';\n\nconst props = withDefaults(defineProps<EpFlipCardProps>(), {\n trigger: \"click\",\n noIndicator: false,\n density: \"default\",\n maxWidth: \"max-w-xl\",\n height: \"medium\",\n front: () => ({\n content: \"\",\n bgImg: \"\",\n bgColor: null,\n textColor: null,\n }),\n back: () => ({\n content: \"\",\n bgImg: \"\",\n bgColor: null,\n textColor: null,\n })\n});\n\nconst flipped = ref(false);\nconst toggle = () => {\n flipped.value = !flipped.value\n}\n\n\nconst stylesCard = computed(() => {\n return `\n shadow-lg \n ${density_style[props.density]}\n rounded-md\n `;\n});\n\nconst heightStyle = computed(() => {\n return (props.height === \"small\") ? \"h-72\" : (props.height === \"medium\") ? \"h-96\" : \"h-[612px]\" \n});\n\n\nconst hasContent = computed(() => {\n return !!props.front.content || !!props.back.content || !!props.front.title || !!props.front.subtitle || !!props.back.title || !!props.back.subtitle;\n});\n\n\nconst darkMode = useColorMode();\n\nconst gradientFront = computed(() => {\n if (!props.front.bgImg) return undefined;\n const color = (darkMode.value === \"dark\") ? \"rgba(0,0,0,0.75)\" : \"rgba(255,255,255,0.8)\";\n return `linear-gradient(to bottom, ${color}, ${color}), url(${props.front.bgImg})`;\n});\n\nconst gradientBack = computed(() => {\n if (!props.back.bgImg) return undefined;\n const color = (darkMode.value === \"dark\") ? \"rgba(0,0,0,0.75)\" : \"rgba(255,255,255,0.8)\";\n return `linear-gradient(to bottom, ${color}, ${color}), url(${props.back.bgImg})`;\n});\n\n</script>\n\n<template>\n <div \n :class=\"`relative perspective-1000 cursor-pointer flex items-center justify-center\n w-full ${heightStyle} my-3`\" \n v-if=\"hasContent\"\n @click=\"() => {if(trigger === 'click') toggle()}\"\n > \n <div \n :class=\"`${maxWidth} h-full relative w-full`\"\n @mouseenter=\"() => { if (trigger === 'hover') flipped = true }\"\n @mouseleave=\"() => { if (trigger === 'hover') flipped = false }\"\n >\n <!-- Rotator -->\n <div\n :class=\"`relative w-full h-full transition-transform duration-500 preserve-3d\n ${flipped ? 'rotate-y-180' : ''}`\"\n >\n <!-- Front card -->\n <div \n :class=\"`${stylesCard} ${(!props.front.bgImg && !props.front.bgColor) ? 'bg-surface-2 dark:bg-surface-2-dark' : ''} absolute inset-0 w-full h-full backface-hidden overflow-y-auto\n bg-cover bg-center dark:text-white`\"\n :style=\"{ color: (front.textColor) ?? undefined, backgroundImage: gradientFront, backgroundColor: (front.bgImg || !front.bgColor)? undefined : front.bgColor}\"\n >\n <div\n v-if=\"front.title || front.subtitle\"\n class=\"mb-2\"\n >\n <h3 class=\"text-2xl font-bold\">{{ front.title }}</h3>\n <h4 :class=\"`text-xs`\">\n {{ front.subtitle }}\n </h4>\n </div>\n <div v-html=\"useRenderText(front.content ?? '')\"></div>\n </div>\n <!-- Back card -->\n <div\n :class=\"`${stylesCard} ${(!props.back.bgImg && !props.back.bgColor) ? 'bg-surface-2 dark:bg-surface-2-dark' : ''} absolute inset-0 w-full h-full rotate-y-180 backface-hidden overflow-y-auto\n bg-cover bg-center dark:text-white`\"\n :style=\"{ color: (back.textColor) ?? undefined, backgroundImage: gradientBack, backgroundColor: (back.bgImg || !back.bgColor)? undefined : back.bgColor}\"\n >\n <div\n v-if=\"back.title || back.subtitle\"\n class=\"mb-2\"\n >\n <h3 class=\"text-2xl font-bold\">{{ back.title }}</h3>\n <h4 :class=\"`text-xs`\">\n {{ back.subtitle }}\n </h4>\n </div>\n <div v-html=\"useRenderText(back.content ?? '')\"></div>\n </div>\n </div>\n\n <!-- Indicator -->\n <transition name=\"fade\">\n <div v-if=\"!noIndicator\"\n class=\"absolute bottom-2 right-2 flex items-center gap-1\n px-2 py-1 rounded-full bg-black/70 text-white text-[10px] font-medium\n pointer-events-none select-none\">\n <EpIcon\n :icon-path=\"mdiRotate360\"\n :class=\"`w-3.5 h-3.5 shrink-0 transition-transform duration-500\n ${flipped ? 'rotate-180' : ''}`\"\n />\n <span class=\"leading-none\">\n {{ trigger==='hover' ? 'Survoler' : 'Cliquer' }}\n </span>\n </div>\n </transition>\n </div>\n </div>\n</template>\n\n<style scoped>\n.perspective-1000 { perspective: 1000px }\n.preserve-3d { transform-style: preserve-3d }\n.backface-hidden { backface-visibility: hidden }\n.rotate-y-180 { transform: rotateY(180deg) }\n\n/* simple fade for the helper badge */\n.fade-enter-active, .fade-leave-active { transition: opacity .3s }\n.fade-enter-from, .fade-leave-to { opacity: 0 }\n</style>\n"],"names":["_createElementBlock","_normalizeClass","trigger","_createElementVNode","maxWidth","_normalizeStyle","front","_openBlock","_toDisplayString","_unref","back","_createVNode","_Transition","noIndicator","EpIcon"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _sfc_main from "./TimelineItem.vue2.js";
|
|
2
2
|
/* empty css */
|
|
3
3
|
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
|
|
4
|
-
const TimeLineItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
4
|
+
const TimeLineItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5f6c3e06"]]);
|
|
5
5
|
export {
|
|
6
6
|
TimeLineItem as default
|
|
7
7
|
};
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import { defineComponent, ref, toRefs, onMounted, watch, watchEffect, computed, createElementBlock, openBlock, normalizeClass, createElementVNode,
|
|
1
|
+
import { defineComponent, ref, toRefs, onMounted, watch, watchEffect, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, unref, createVNode, createCommentVNode, toDisplayString, nextTick } from "vue";
|
|
2
2
|
import { useRenderText } from "../../composables/useRenderText.js";
|
|
3
|
-
import _sfc_main$
|
|
3
|
+
import _sfc_main$2 from "../basics/EpImg.vue.js";
|
|
4
4
|
import { colorsTimeLine } from "../../types/TimeLine.js";
|
|
5
|
+
import _sfc_main$1 from "../basics/EpIcon.vue.js";
|
|
6
|
+
import { mdiClose, mdiPlus } from "@mdi/js";
|
|
5
7
|
const _hoisted_1 = {
|
|
6
8
|
key: 0,
|
|
7
9
|
class: "font-bold"
|
|
@@ -24,16 +26,19 @@ const _hoisted_5 = {
|
|
|
24
26
|
};
|
|
25
27
|
const _hoisted_6 = {
|
|
26
28
|
key: 0,
|
|
27
|
-
class: "flex-1"
|
|
29
|
+
class: "flex-1 flex flex-col items-center"
|
|
28
30
|
};
|
|
29
|
-
const _hoisted_7 =
|
|
31
|
+
const _hoisted_7 = {
|
|
32
|
+
key: 0,
|
|
33
|
+
class: "text-center"
|
|
34
|
+
};
|
|
35
|
+
const _hoisted_8 = ["innerHTML"];
|
|
30
36
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
31
37
|
__name: "TimelineItem",
|
|
32
38
|
props: {
|
|
33
39
|
title: { default: "En savoir plus" },
|
|
34
40
|
date: {},
|
|
35
|
-
event: {}
|
|
36
|
-
collapse: { type: Boolean, default: false }
|
|
41
|
+
event: {}
|
|
37
42
|
},
|
|
38
43
|
setup(__props) {
|
|
39
44
|
const props = __props;
|
|
@@ -72,7 +77,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
72
77
|
}
|
|
73
78
|
});
|
|
74
79
|
watchEffect(() => {
|
|
75
|
-
if (!showDiv.value && first.value && ready.value) {
|
|
80
|
+
if (!showDiv.value && !event.value.collapsed && first.value && ready.value) {
|
|
76
81
|
toggleDivVisibility();
|
|
77
82
|
first.value = false;
|
|
78
83
|
}
|
|
@@ -111,8 +116,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
111
116
|
onClick: toggleDivVisibility
|
|
112
117
|
}, [
|
|
113
118
|
createElementVNode("div", {
|
|
114
|
-
class: normalizeClass(`w-5 h-5
|
|
115
|
-
},
|
|
119
|
+
class: normalizeClass(`w-5 h-5 border-2 ${colorEvent.value.border} ${colorEvent.value.bg} ${unref(event).tag ? "text-white" : "text-black"} absolute -left-12 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0 flex items-center justify-center`)
|
|
120
|
+
}, [
|
|
121
|
+
createVNode(_sfc_main$1, {
|
|
122
|
+
"icon-path": showDiv.value ? unref(mdiClose) : unref(mdiPlus),
|
|
123
|
+
size: "20"
|
|
124
|
+
}, null, 8, ["icon-path"])
|
|
125
|
+
], 2),
|
|
116
126
|
createElementVNode("div", {
|
|
117
127
|
class: normalizeClass(`w-10 border ${colorEvent.value.border} absolute -left-10 z-0`)
|
|
118
128
|
}, null, 2),
|
|
@@ -138,19 +148,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
138
148
|
class: normalizeClass(`${src.value ? "flex" : ""} py-4`)
|
|
139
149
|
}, [
|
|
140
150
|
src.value ? (openBlock(), createElementBlock("div", _hoisted_6, [
|
|
141
|
-
createVNode(_sfc_main$
|
|
151
|
+
createVNode(_sfc_main$2, {
|
|
142
152
|
noModal: "",
|
|
143
153
|
cols: "8",
|
|
144
154
|
src: src.value,
|
|
145
155
|
alt: (_g = unref(event).text) == null ? void 0 : _g.headline,
|
|
146
156
|
ref_key: "epImg",
|
|
147
157
|
ref: epImg
|
|
148
|
-
}, null, 8, ["src", "alt"])
|
|
158
|
+
}, null, 8, ["src", "alt"]),
|
|
159
|
+
unref(event).media.label ? (openBlock(), createElementBlock("i", _hoisted_7, toDisplayString(unref(event).media.label), 1)) : createCommentVNode("", true)
|
|
149
160
|
])) : createCommentVNode("", true),
|
|
150
161
|
createElementVNode("div", {
|
|
151
162
|
class: "flex-1",
|
|
152
163
|
innerHTML: unref(useRenderText)(unref(event).text.text)
|
|
153
|
-
}, null, 8,
|
|
164
|
+
}, null, 8, _hoisted_8)
|
|
154
165
|
], 2)
|
|
155
166
|
], 512)
|
|
156
167
|
])
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineItem.vue2.js","sources":["../../../src/components/tools/TimelineItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n ref,\n toRefs,\n onMounted,\n computed,\n watch,\n nextTick,\n watchEffect,\n} from \"vue\";\nimport { useRenderText } from \"~/composables/useRenderText\";\nimport EpImg from \"~/components/basics/EpImg.vue\";\nimport {\n type EventTimeLine,\n type TimeLineDate,\n colorsTimeLine,\n} from \"~/types/TimeLine\";\n\ninterface Props {\n title?: string | null;\n date?: string;\n event: EventTimeLine;\n
|
|
1
|
+
{"version":3,"file":"TimelineItem.vue2.js","sources":["../../../src/components/tools/TimelineItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n ref,\n toRefs,\n onMounted,\n computed,\n watch,\n nextTick,\n watchEffect,\n} from \"vue\";\nimport { useRenderText } from \"~/composables/useRenderText\";\nimport EpImg from \"~/components/basics/EpImg.vue\";\nimport {\n type EventTimeLine,\n type TimeLineDate,\n colorsTimeLine,\n} from \"~/types/TimeLine\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport { mdiClose, mdiPlus } from \"@mdi/js\";\n\ninterface Props {\n title?: string | null;\n date?: string;\n event: EventTimeLine;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n title: \"En savoir plus\",\n type: \"base\",\n});\n\nconst ready = ref(false);\nconst first = ref(true);\n\nconst showDiv = ref(false);\n\nconst collapsible = ref<HTMLElement | null>(null);\n\nconst { event } = toRefs(props);\n\nconst updateMaxHeight = async () => {\n await nextTick();\n if (collapsible.value) {\n collapsible.value.style.maxHeight = showDiv.value\n ? collapsible.value.scrollHeight + \"px\"\n : \"0px\";\n }\n};\n\nonMounted(() => {\n updateMaxHeight();\n});\n\nwatch([() => event.value.text.text, () => props.event.media.url], () => {\n updateMaxHeight();\n});\n\nfunction toggleDivVisibility() {\n showDiv.value = !showDiv.value;\n updateMaxHeight();\n if (collapsible.value && !collapsible.value.style.transition) {\n collapsible.value.style.transition = \"max-height 0.2s ease-out\";\n }\n}\n\n// Make sure the image is loaded before opening the div\nconst epImg = ref<{ imgEl: HTMLImageElement | null } | null>(null);\n\nwatchEffect(() => {\n const img = epImg.value?.imgEl;\n if (img) {\n img.addEventListener(\"load\", () => {\n ready.value = true;\n });\n }\n});\n\nwatchEffect(() => {\n if (!showDiv.value && !event.value.collapsed && first.value && ready.value) {\n toggleDivVisibility();\n first.value = false;\n }\n});\n\nconst start_date = computed(() => {\n if (props.event.start_date) return parseTimeline(props.event.start_date);\n return null;\n});\n\nconst end_date = computed(() => {\n if (props.event.end_date) return parseTimeline(props.event.end_date);\n return null;\n});\n\nconst src = computed(() => {\n return props.event.media.url?.trim() ? props.event.media.url : null;\n});\n\nconst colorEvent = computed(() => {\n if (props.event.tag) return colorsTimeLine[props.event.tag.color];\n return colorsTimeLine.noTag;\n});\n\nconst parseTimeline = (timeDate: TimeLineDate) => {\n const { day, month, year, hour } = timeDate;\n const hoursStr = hour || \"\";\n const minutesStr = timeDate.minute ? `:${timeDate.minute}` : \"\";\n if (!day && !month && !year)\n return hoursStr ? { date: null, hour: hoursStr + minutesStr } : null;\n const dayStr = day ? `${day}/` : \"\";\n const monthStr = month ? `${month}/` : \"\";\n const yearStr = year || \"\";\n return { date: dayStr + monthStr + yearStr, hour: hoursStr + minutesStr };\n};\n</script>\n\n<template>\n <div\n :class=\"`cursor-pointer ml-10 relative flex items-center p-2 ${colorEvent.border} border-2 rounded-r-lg mb-8 flex-col md:flex-row space-y-4 md:space-y-0`\"\n @click=\"toggleDivVisibility\"\n >\n <!-- Dot -->\n <div\n :class=\"`w-5 h-5 border-2 ${colorEvent.border} ${colorEvent.bg} ${(event.tag)? 'text-white' : 'text-black'} absolute -left-12 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0 flex items-center justify-center`\"\n ><EpIcon :icon-path=\"(showDiv)? mdiClose : mdiPlus\" size=\"20\"></EpIcon></div>\n <!-- Line -->\n <div :class=\"`w-10 border ${colorEvent.border} absolute -left-10 z-0`\" />\n <div>\n <div :class=\"`${colorEvent.text} text-sm`\">\n <!-- sur protheus on est trop laxes ... mais on peut avoir plusieurs cas :/ -->\n <span v-if=\"start_date?.date\" class=\"font-bold\">{{\n start_date.date\n }}</span>\n <span v-if=\"start_date?.hour\" class=\"text-xs ml-1\">{{\n start_date.hour\n }}</span>\n <span v-if=\"end_date?.date\" class=\"mx-4\">-</span>\n <span v-if=\"end_date?.date\" class=\"font-bold\">{{ end_date.date }}</span>\n <span v-if=\"end_date?.hour\" class=\"text-xs ml-1\">\n {{ end_date.hour }}</span\n >\n </div>\n <h2 :class=\"`text-2xl ${colorEvent.text}`\">\n {{ event.text?.headline }}\n </h2>\n <!-- Content -->\n <div ref=\"collapsible\" class=\"ep-content-timeline-item\">\n <div :class=\"`${src ? 'flex' : ''} py-4`\">\n <div v-if=\"src\" class=\"flex-1 flex flex-col items-center\">\n <EpImg\n noModal\n cols=\"8\"\n :src=\"src\"\n :alt=\"event.text?.headline\"\n ref=\"epImg\"\n ></EpImg>\n <i class=\"text-center\" v-if=\"event.media.label\">{{ event.media.label }}</i>\n </div>\n <div class=\"flex-1\" v-html=\"useRenderText(event.text.text)\" />\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<style scoped>\n.ep-content-timeline-item {\n max-height: 0;\n overflow: hidden;\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_unref","_createVNode","EpIcon","_openBlock","_toDisplayString","EpImg"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,UAAM,QAAQ;AAKd,UAAM,QAAQ,IAAI,KAAK;AACvB,UAAM,QAAQ,IAAI,IAAI;AAEtB,UAAM,UAAU,IAAI,KAAK;AAEzB,UAAM,cAAc,IAAwB,IAAI;AAEhD,UAAM,EAAE,MAAA,IAAU,OAAO,KAAK;AAE9B,UAAM,kBAAkB,YAAY;AAClC,YAAM,SAAA;AACN,UAAI,YAAY,OAAO;AACrB,oBAAY,MAAM,MAAM,YAAY,QAAQ,QACxC,YAAY,MAAM,eAAe,OACjC;AAAA,MACN;AAAA,IACF;AAEA,cAAU,MAAM;AACd,sBAAA;AAAA,IACF,CAAC;AAED,UAAM,CAAC,MAAM,MAAM,MAAM,KAAK,MAAM,MAAM,MAAM,MAAM,MAAM,GAAG,GAAG,MAAM;AACtE,sBAAA;AAAA,IACF,CAAC;AAED,aAAS,sBAAsB;AAC7B,cAAQ,QAAQ,CAAC,QAAQ;AACzB,sBAAA;AACA,UAAI,YAAY,SAAS,CAAC,YAAY,MAAM,MAAM,YAAY;AAC5D,oBAAY,MAAM,MAAM,aAAa;AAAA,MACvC;AAAA,IACF;AAGA,UAAM,QAAQ,IAA+C,IAAI;AAEjE,gBAAY,MAAM;;AAChB,YAAM,OAAM,WAAM,UAAN,mBAAa;AACzB,UAAI,KAAK;AACP,YAAI,iBAAiB,QAAQ,MAAM;AACjC,gBAAM,QAAQ;AAAA,QAChB,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAED,gBAAY,MAAM;AAChB,UAAI,CAAC,QAAQ,SAAS,CAAC,MAAM,MAAM,aAAa,MAAM,SAAS,MAAM,OAAO;AAC1E,4BAAA;AACA,cAAM,QAAQ;AAAA,MAChB;AAAA,IACF,CAAC;AAED,UAAM,aAAa,SAAS,MAAM;AAChC,UAAI,MAAM,MAAM,mBAAmB,cAAc,MAAM,MAAM,UAAU;AACvE,aAAO;AAAA,IACT,CAAC;AAED,UAAM,WAAW,SAAS,MAAM;AAC9B,UAAI,MAAM,MAAM,iBAAiB,cAAc,MAAM,MAAM,QAAQ;AACnE,aAAO;AAAA,IACT,CAAC;AAED,UAAM,MAAM,SAAS,MAAM;;AACzB,eAAO,WAAM,MAAM,MAAM,QAAlB,mBAAuB,UAAS,MAAM,MAAM,MAAM,MAAM;AAAA,IACjE,CAAC;AAED,UAAM,aAAa,SAAS,MAAM;AAChC,UAAI,MAAM,MAAM,IAAK,QAAO,eAAe,MAAM,MAAM,IAAI,KAAK;AAChE,aAAO,eAAe;AAAA,IACxB,CAAC;AAED,UAAM,gBAAgB,CAAC,aAA2B;AAChD,YAAM,EAAE,KAAK,OAAO,MAAM,SAAS;AACnC,YAAM,WAAW,QAAQ;AACzB,YAAM,aAAa,SAAS,SAAS,IAAI,SAAS,MAAM,KAAK;AAC7D,UAAI,CAAC,OAAO,CAAC,SAAS,CAAC;AACrB,eAAO,WAAW,EAAE,MAAM,MAAM,MAAM,WAAW,eAAe;AAClE,YAAM,SAAS,MAAM,GAAG,GAAG,MAAM;AACjC,YAAM,WAAW,QAAQ,GAAG,KAAK,MAAM;AACvC,YAAM,UAAU,QAAQ;AACxB,aAAO,EAAE,MAAM,SAAS,WAAW,SAAS,MAAM,WAAW,WAAA;AAAA,IAC/D;;;0BAIEA,mBA6CM,OAAA;AAAA,QA5CH,OAAKC,eAAA,uDAAyD,WAAA,MAAW,MAAM,yEAAA;AAAA,QAC/E,SAAO;AAAA,MAAA;QAGRC,mBAE8E,OAAA;AAAA,UAD3E,OAAKD,eAAA,oBAAsB,WAAA,MAAW,MAAM,IAAI,WAAA,MAAW,EAAE,IAAKE,MAAA,KAAA,EAAM,MAAG,eAAA,YAAA,+GAAA;AAAA,QAAA;UAC7EC,YAAuEC,aAAA;AAAA,YAA9D,aAAY,QAAA,QAAWF,MAAA,QAAA,IAAWA,MAAA,OAAA;AAAA,YAAS,MAAK;AAAA,UAAA;;QAE1DD,mBAAyE,OAAA;AAAA,UAAnE,OAAKD,eAAA,eAAiB,WAAA,MAAW,MAAM,wBAAA;AAAA,QAAA;QAC7CC,mBAkCM,OAAA,MAAA;AAAA,UAjCJA,mBAaM,OAAA;AAAA,YAbA,OAAKD,eAAA,GAAK,WAAA,MAAW,IAAI,UAAA;AAAA,UAAA;cAEjB,gBAAA,UAAA,mBAAY,SAAxBK,UAAA,GAAAN,mBAES,QAFT,YAESO,gBADP,WAAA,MAAW,IAAI,GAAA,CAAA;cAEL,gBAAA,UAAA,mBAAY,SAAxBD,UAAA,GAAAN,mBAES,QAFT,YAESO,gBADP,WAAA,MAAW,IAAI,GAAA,CAAA;cAEL,cAAA,UAAA,mBAAU,sBAAtBP,mBAAiD,QAAjD,YAAyC,GAAC;cAC9B,cAAA,UAAA,mBAAU,SAAtBM,UAAA,GAAAN,mBAAwE,QAAxE,YAAwEO,gBAAvB,SAAA,MAAS,IAAI,GAAA,CAAA;cAClD,cAAA,UAAA,mBAAU,SAAtBD,UAAA,GAAAN,mBAEC,QAFD,YAECO,gBADI,SAAA,MAAS,IAAI,GAAA,CAAA;;UAGpBL,mBAEK,MAAA;AAAA,YAFA,OAAKD,eAAA,YAAc,WAAA,MAAW,IAAI,EAAA;AAAA,UAAA,oBAClCE,WAAA,KAAA,EAAM,SAANA,mBAAY,QAAQ,GAAA,CAAA;AAAA,UAGzBD,mBAcM,OAAA;AAAA,qBAdG;AAAA,YAAJ,KAAI;AAAA,YAAc,OAAM;AAAA,UAAA;YAC3BA,mBAYM,OAAA;AAAA,cAZA,yBAAU,IAAA,QAAG,SAAA,EAAA,OAAA;AAAA,YAAA;cACN,IAAA,SAAXI,UAAA,GAAAN,mBASM,OATN,YASM;AAAA,gBARJI,YAMSI,aAAA;AAAA,kBALP,SAAA;AAAA,kBACA,MAAK;AAAA,kBACJ,KAAK,IAAA;AAAA,kBACL,MAAKL,WAAA,KAAA,EAAM,SAANA,mBAAY;AAAA,2BACd;AAAA,kBAAJ,KAAI;AAAA,gBAAA;gBAEuBA,MAAA,KAAA,EAAM,MAAM,SAAzCG,aAAAN,mBAA2E,KAA3E,YAA2EO,gBAAxBJ,aAAM,MAAM,KAAK,GAAA,CAAA;;cAEtED,mBAA8D,OAAA;AAAA,gBAAzD,OAAM;AAAA,gBAAS,WAAQC,MAAA,aAAA,EAAcA,aAAM,KAAK,IAAI;AAAA,cAAA;;;;;;;;"}
|
package/dist/style.css
CHANGED
|
@@ -1,17 +1,67 @@
|
|
|
1
1
|
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
.ep-accordeon-content[data-v-9a4f2570] {
|
|
3
|
+
transition: max-height 0.2s ease-out;
|
|
4
|
+
overflow: hidden;
|
|
4
5
|
}
|
|
5
6
|
|
|
6
7
|
|
|
7
|
-
.
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
.ep-modal-mask {
|
|
9
|
+
position: fixed;
|
|
10
|
+
z-index: 6998;
|
|
11
|
+
top: 0;
|
|
12
|
+
left: 0;
|
|
13
|
+
width: 100%;
|
|
14
|
+
height: 100%;
|
|
15
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
16
|
+
display: flex;
|
|
17
|
+
transition: opacity 0.3s ease;
|
|
10
18
|
}
|
|
11
|
-
.
|
|
12
|
-
|
|
19
|
+
.ep-modal-container {
|
|
20
|
+
margin: auto;
|
|
21
|
+
max-height: 95%;
|
|
22
|
+
transition: all 0.3s ease;
|
|
23
|
+
z-index: 7000;
|
|
24
|
+
}
|
|
25
|
+
.ep-modal-header h3 {
|
|
26
|
+
margin-top: 0;
|
|
27
|
+
color: #42b983;
|
|
28
|
+
}
|
|
29
|
+
.ep-modal-body {
|
|
30
|
+
margin: 20px 0;
|
|
31
|
+
}
|
|
32
|
+
.ep-modal-default-button {
|
|
33
|
+
float: right;
|
|
34
|
+
}
|
|
35
|
+
.ep-modal-enter-from {
|
|
13
36
|
opacity: 0;
|
|
14
|
-
|
|
37
|
+
}
|
|
38
|
+
.ep-modal-leave-to {
|
|
39
|
+
opacity: 0;
|
|
40
|
+
}
|
|
41
|
+
.ep-modal-enter-from .ep-modal-container,
|
|
42
|
+
.ep-modal-leave-to .ep-modal-container {
|
|
43
|
+
transform: scale(1.1);
|
|
44
|
+
}
|
|
45
|
+
/*$vite$:1*/
|
|
46
|
+
|
|
47
|
+
.perspective-1000[data-v-51e4a299] { perspective: 1000px
|
|
48
|
+
}
|
|
49
|
+
.preserve-3d[data-v-51e4a299] { transform-style: preserve-3d
|
|
50
|
+
}
|
|
51
|
+
.backface-hidden[data-v-51e4a299] { backface-visibility: hidden
|
|
52
|
+
}
|
|
53
|
+
.rotate-y-180[data-v-51e4a299] { transform: rotateY(180deg)
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* simple fade for the helper badge */
|
|
57
|
+
.fade-enter-active[data-v-51e4a299], .fade-leave-active[data-v-51e4a299] { transition: opacity .3s
|
|
58
|
+
}
|
|
59
|
+
.fade-enter-from[data-v-51e4a299], .fade-leave-to[data-v-51e4a299] { opacity: 0
|
|
60
|
+
}
|
|
61
|
+
/*$vite$:1*/
|
|
62
|
+
|
|
63
|
+
.katex[data-v-a9b6227c] {
|
|
64
|
+
font-size: 1.6em;
|
|
15
65
|
}
|
|
16
66
|
/*$vite$:1*/
|
|
17
67
|
|
|
@@ -56,74 +106,20 @@ pre {
|
|
|
56
106
|
}
|
|
57
107
|
/*$vite$:1*/
|
|
58
108
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
overflow: hidden;
|
|
62
|
-
}
|
|
63
|
-
/*$vite$:1*/
|
|
64
|
-
|
|
65
|
-
.ep-tree-wrapper[data-v-482cff9d] {
|
|
66
|
-
overflow: auto;
|
|
67
|
-
border: 1px solid #ddd;
|
|
68
|
-
}
|
|
69
|
-
.ep-tree-container[data-v-482cff9d] {
|
|
70
|
-
width: 100%;
|
|
71
|
-
overflow-x: auto;
|
|
109
|
+
pre {
|
|
110
|
+
white-space: break-spaces;
|
|
72
111
|
}
|
|
73
112
|
/*$vite$:1*/
|
|
74
113
|
|
|
75
|
-
.
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
}
|
|
79
|
-
.backface-hidden[data-v-edb9ebb1] { backface-visibility: hidden
|
|
80
|
-
}
|
|
81
|
-
.rotate-y-180[data-v-edb9ebb1] { transform: rotateY(180deg)
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
/* simple fade for the helper badge */
|
|
85
|
-
.fade-enter-active[data-v-edb9ebb1], .fade-leave-active[data-v-edb9ebb1] { transition: opacity .3s
|
|
86
|
-
}
|
|
87
|
-
.fade-enter-from[data-v-edb9ebb1], .fade-leave-to[data-v-edb9ebb1] { opacity: 0
|
|
114
|
+
.shape[data-v-4a99873e] {
|
|
115
|
+
height: var(--e4ec2c0a);
|
|
116
|
+
width: var(--3f346a72);
|
|
88
117
|
}
|
|
89
118
|
/*$vite$:1*/
|
|
90
119
|
|
|
91
|
-
.ep-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
top: 0;
|
|
95
|
-
left: 0;
|
|
96
|
-
width: 100%;
|
|
97
|
-
height: 100%;
|
|
98
|
-
background-color: rgba(0, 0, 0, 0.5);
|
|
99
|
-
display: flex;
|
|
100
|
-
transition: opacity 0.3s ease;
|
|
101
|
-
}
|
|
102
|
-
.ep-modal-container {
|
|
103
|
-
margin: auto;
|
|
104
|
-
max-height: 95%;
|
|
105
|
-
transition: all 0.3s ease;
|
|
106
|
-
z-index: 7000;
|
|
107
|
-
}
|
|
108
|
-
.ep-modal-header h3 {
|
|
109
|
-
margin-top: 0;
|
|
110
|
-
color: #42b983;
|
|
111
|
-
}
|
|
112
|
-
.ep-modal-body {
|
|
113
|
-
margin: 20px 0;
|
|
114
|
-
}
|
|
115
|
-
.ep-modal-default-button {
|
|
116
|
-
float: right;
|
|
117
|
-
}
|
|
118
|
-
.ep-modal-enter-from {
|
|
119
|
-
opacity: 0;
|
|
120
|
-
}
|
|
121
|
-
.ep-modal-leave-to {
|
|
122
|
-
opacity: 0;
|
|
123
|
-
}
|
|
124
|
-
.ep-modal-enter-from .ep-modal-container,
|
|
125
|
-
.ep-modal-leave-to .ep-modal-container {
|
|
126
|
-
transform: scale(1.1);
|
|
120
|
+
.ep-info-box[data-v-64f3d0d8] a {
|
|
121
|
+
text-decoration: underline;
|
|
122
|
+
font-weight: 500;
|
|
127
123
|
}
|
|
128
124
|
/*$vite$:1*/
|
|
129
125
|
|
|
@@ -132,26 +128,35 @@ pre {
|
|
|
132
128
|
}
|
|
133
129
|
/*$vite$:1*/
|
|
134
130
|
|
|
135
|
-
.
|
|
136
|
-
|
|
131
|
+
.ep-tree-wrapper[data-v-482cff9d] {
|
|
132
|
+
overflow: auto;
|
|
133
|
+
border: 1px solid #ddd;
|
|
137
134
|
}
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
text-decoration: underline;
|
|
142
|
-
font-weight: 500;
|
|
135
|
+
.ep-tree-container[data-v-482cff9d] {
|
|
136
|
+
width: 100%;
|
|
137
|
+
overflow-x: auto;
|
|
143
138
|
}
|
|
144
139
|
/*$vite$:1*/
|
|
145
140
|
|
|
146
|
-
.
|
|
147
|
-
|
|
148
|
-
|
|
141
|
+
.eptimeline-list-enter-active[data-v-6ad2fc60],
|
|
142
|
+
.eptimeline-list-leave-active[data-v-6ad2fc60] {
|
|
143
|
+
transition: all 0.5s ease;
|
|
144
|
+
}
|
|
145
|
+
.eptimeline-list-enter-from[data-v-6ad2fc60],
|
|
146
|
+
.eptimeline-list-leave-to[data-v-6ad2fc60] {
|
|
147
|
+
opacity: 0;
|
|
148
|
+
transform: translateX(30px);
|
|
149
149
|
}
|
|
150
150
|
/*$vite$:1*/
|
|
151
151
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
152
|
+
/* Target the top-level KaTeX container and increase the font size */
|
|
153
|
+
.katex-block[data-v-0d66d7fc] .katex {
|
|
154
|
+
/* Increase the overall size of the math relative to the parent font size */
|
|
155
|
+
font-size: 2em;
|
|
156
|
+
}
|
|
157
|
+
/* If you want inline math to be a specific size relative to surrounding text */
|
|
158
|
+
.katex-render[data-v-0d66d7fc] .katex-display {
|
|
159
|
+
font-size: 1.5em;
|
|
155
160
|
}
|
|
156
161
|
/*$vite$:1*/
|
|
157
162
|
|
|
@@ -162,13 +167,8 @@ pre {
|
|
|
162
167
|
}
|
|
163
168
|
/*$vite$:1*/
|
|
164
169
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
font-size: 2em;
|
|
169
|
-
}
|
|
170
|
-
/* If you want inline math to be a specific size relative to surrounding text */
|
|
171
|
-
.katex-render[data-v-0d66d7fc] .katex-display {
|
|
172
|
-
font-size: 1.5em;
|
|
170
|
+
.ep-content-timeline-item[data-v-5f6c3e06] {
|
|
171
|
+
max-height: 0;
|
|
172
|
+
overflow: hidden;
|
|
173
173
|
}
|
|
174
174
|
/*$vite$:1*/
|
package/dist/types/TimeLine.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeLine.js","sources":["../../src/types/TimeLine.ts"],"sourcesContent":["export const typeTimeLineTag = {\n base:{\n default:'bg-gray-100 dark:bg-gray-300 dark:text-white',\n outlined:'border-gray-100 border dark:bg-gray-300 dark:text-white'\n }\n}\n\nexport interface HeadTimeLine {\n text:string;\n headline?:string;\n}\n\nexport interface TagTimeLine {\n id:number|string;\n color:ColorsTags;\n title:string;\n active?:boolean;\n}\n\nexport interface TimeLineDate {\n day?:string|number;\n hour?:string|number;\n year?:string|number;\n month?:string|number;\n minute?:string|number;\n}\n\nexport interface EventTimeLine {\n id:string;\n tag?:TagTimeLine|null;\n text:HeadTimeLine;\n end_date:TimeLineDate;\n start_date:TimeLineDate;\n media:{\n url:string;\n };\n background?:{\n color?:string;\n }\n}\n\nexport const colorsTimeLine = {\n \"noTag\":{bg:\"bg-white\", text:\"dark:text-white\", border:\"border-grey-900 dark:border-grey-400\"},\n \"blue-grey\":{bg:\"bg-sky-600\", text:\"text-sky-600 dark:text-sky-500\", border:\"border-sky-600 dark:border-sky-500\"},\n \"red\":{bg:\"bg-red-600\", text:\"text-red-600 dark:text-red-500\", border:\"border-red-600 dark:border-red-500\"},\n \"pink\":{bg:\"bg-pink-600\", text:\"text-pink-600 dark:text-pink-500\", border:\"border-pink-600 dark:border-pink-500\"},\n \"purple\":{bg:\"bg-purple-600\", text:\"text-purple-600 dark:text-purple-500\", border:\"border-purple-600 dark:border-purple-500\"},\n \"deep-purple\":{bg:\"bg-violet-600\", text:\"text-violet-600 dark:text-violet-400\", border:\"border-violet-600 dark:border-violet-400\"}, \n \"indigo\":{bg:\"bg-indigo-600\", text:\"text-indigo-600 dark:text-indigo-400\", border:\"border-indigo-600 dark:border-indigo-400\"},\n \"blue\":{bg:\"bg-blue-600\", text:\"text-blue-600 dark:text-blue-400\", border:\"border-blue-600 dark:border-blue-400\"}, \n \"cyan\":{bg:\"bg-cyan-600\", text:\"text-cyan-600 dark:text-cyan-500\", border:\"border-cyan-600 dark:border-cyan-500\"}, \n \"teal\":{bg:\"bg-teal-600\", text:\"text-teal-600 dark:text-teal-500\", border:\"border-teal-600 dark:border-teal-500\"}, \n \"green\":{bg:\"bg-green-600\", text:\"text-green-600 dark:text-green-500\", border:\"border-green-600 dark:border-green-500\"}, \n \"light-green\":{bg:\"bg-emerald-400\", text:\"text-emerald-400 dark:text-emerald-400\", border:\"border-emerald-400 dark:border-emerald-500\"}, \n \"lime\":{bg:\"bg-lime-600\", text:\"text-lime-600 dark:text-lime-500\", border:\"border-lime-600 dark:border-lime-500\"}, \n \"light-blue\":{bg:\"bg-cyan-400\", text:\"text-cyan-400 dark:text-cyan-300\", border:\"border-cyan-400 dark:border-cyan-300\"}, \n \"deep-orange\":{bg:\"bg-amber-700\", text:\"text-amber-700 dark:text-amber-500\", border:\"border-amber-700 dark:border-amber-600\"}, \n \"orange\":{bg:\"bg-orange-600\", text:\"text-orange-600 dark:text-orange-400\", border:\"border-orange-600 dark:border-orange-500\"},\n \"brown\":{bg:\"bg-amber-900\", text:\"text-amber-900 dark:text-amber-500\", border:\"border-amber-900 dark:border-amber-700\"}, \n}\n\nexport type ColorsTags = keyof typeof colorsTimeLine\n/*\n <div class=\"bg-blue-grey\">\"blue-grey\" TO ADD!</div>\n <div class=\"\">\"red\"</div>\n <div class=\"\">\"pink\"</div>\n <div class=\"bg-purple-600\">\"purple\"</div>\n <div class=\"bg-deep-purple\">\"deep-purple\" TO ADD!</div>\n <div class=\"bg-indigo-600\">\"indigo\"</div>\n <div class=\"bg-blue-600\">\"blue\"</div>\n <div class=\"bg-cyan-600\">\"cyan\"</div>\n <div class=\"bg-teal-600\">\"teal\"</div>\n <div class=\"bg-green-600\">\"green\"</div>\n <div class=\"bg-light-green\">\"light-green\" TO ADD!</div>\n <div class=\"bg-lime-600\">\"lime\"</div>\n <div class=\"bg-light-blue\">\"light-blue\" TO ADD!</div>\n <div class=\"bg-deep-orange\">\"deep-orange\" TO ADD!</div>\n <div class=\"bg-orange-600\">\"orange\"</div>\n <div class=\"bg-brown\">\"brown\" TO ADD!</div>\n*/"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TimeLine.js","sources":["../../src/types/TimeLine.ts"],"sourcesContent":["export const typeTimeLineTag = {\n base:{\n default:'bg-gray-100 dark:bg-gray-300 dark:text-white',\n outlined:'border-gray-100 border dark:bg-gray-300 dark:text-white'\n }\n}\n\nexport interface HeadTimeLine {\n text:string;\n headline?:string;\n}\n\nexport interface TagTimeLine {\n id:number|string;\n color:ColorsTags;\n title:string;\n active?:boolean;\n}\n\nexport interface TimeLineDate {\n day?:string|number;\n hour?:string|number;\n year?:string|number;\n month?:string|number;\n minute?:string|number;\n}\n\nexport interface EventTimeLine {\n id:string;\n tag?:TagTimeLine|null;\n text:HeadTimeLine;\n end_date:TimeLineDate;\n start_date:TimeLineDate;\n media:{\n url:string;\n label?: string;\n };\n background?:{\n color?:string;\n };\n collapsed?: boolean; \n}\n\nexport const colorsTimeLine = {\n \"noTag\":{bg:\"bg-white\", text:\"dark:text-white\", border:\"border-grey-900 dark:border-grey-400\"},\n \"blue-grey\":{bg:\"bg-sky-600\", text:\"text-sky-600 dark:text-sky-500\", border:\"border-sky-600 dark:border-sky-500\"},\n \"red\":{bg:\"bg-red-600\", text:\"text-red-600 dark:text-red-500\", border:\"border-red-600 dark:border-red-500\"},\n \"pink\":{bg:\"bg-pink-600\", text:\"text-pink-600 dark:text-pink-500\", border:\"border-pink-600 dark:border-pink-500\"},\n \"purple\":{bg:\"bg-purple-600\", text:\"text-purple-600 dark:text-purple-500\", border:\"border-purple-600 dark:border-purple-500\"},\n \"deep-purple\":{bg:\"bg-violet-600\", text:\"text-violet-600 dark:text-violet-400\", border:\"border-violet-600 dark:border-violet-400\"}, \n \"indigo\":{bg:\"bg-indigo-600\", text:\"text-indigo-600 dark:text-indigo-400\", border:\"border-indigo-600 dark:border-indigo-400\"},\n \"blue\":{bg:\"bg-blue-600\", text:\"text-blue-600 dark:text-blue-400\", border:\"border-blue-600 dark:border-blue-400\"}, \n \"cyan\":{bg:\"bg-cyan-600\", text:\"text-cyan-600 dark:text-cyan-500\", border:\"border-cyan-600 dark:border-cyan-500\"}, \n \"teal\":{bg:\"bg-teal-600\", text:\"text-teal-600 dark:text-teal-500\", border:\"border-teal-600 dark:border-teal-500\"}, \n \"green\":{bg:\"bg-green-600\", text:\"text-green-600 dark:text-green-500\", border:\"border-green-600 dark:border-green-500\"}, \n \"light-green\":{bg:\"bg-emerald-400\", text:\"text-emerald-400 dark:text-emerald-400\", border:\"border-emerald-400 dark:border-emerald-500\"}, \n \"lime\":{bg:\"bg-lime-600\", text:\"text-lime-600 dark:text-lime-500\", border:\"border-lime-600 dark:border-lime-500\"}, \n \"light-blue\":{bg:\"bg-cyan-400\", text:\"text-cyan-400 dark:text-cyan-300\", border:\"border-cyan-400 dark:border-cyan-300\"}, \n \"deep-orange\":{bg:\"bg-amber-700\", text:\"text-amber-700 dark:text-amber-500\", border:\"border-amber-700 dark:border-amber-600\"}, \n \"orange\":{bg:\"bg-orange-600\", text:\"text-orange-600 dark:text-orange-400\", border:\"border-orange-600 dark:border-orange-500\"},\n \"brown\":{bg:\"bg-amber-900\", text:\"text-amber-900 dark:text-amber-500\", border:\"border-amber-900 dark:border-amber-700\"}, \n}\n\nexport type ColorsTags = keyof typeof colorsTimeLine\n/*\n <div class=\"bg-blue-grey\">\"blue-grey\" TO ADD!</div>\n <div class=\"\">\"red\"</div>\n <div class=\"\">\"pink\"</div>\n <div class=\"bg-purple-600\">\"purple\"</div>\n <div class=\"bg-deep-purple\">\"deep-purple\" TO ADD!</div>\n <div class=\"bg-indigo-600\">\"indigo\"</div>\n <div class=\"bg-blue-600\">\"blue\"</div>\n <div class=\"bg-cyan-600\">\"cyan\"</div>\n <div class=\"bg-teal-600\">\"teal\"</div>\n <div class=\"bg-green-600\">\"green\"</div>\n <div class=\"bg-light-green\">\"light-green\" TO ADD!</div>\n <div class=\"bg-lime-600\">\"lime\"</div>\n <div class=\"bg-light-blue\">\"light-blue\" TO ADD!</div>\n <div class=\"bg-deep-orange\">\"deep-orange\" TO ADD!</div>\n <div class=\"bg-orange-600\">\"orange\"</div>\n <div class=\"bg-brown\">\"brown\" TO ADD!</div>\n*/"],"names":[],"mappings":"AA2CO,MAAM,iBAAiB;AAAA,EAC1B,SAAQ,EAAC,IAAG,YAAY,MAAK,mBAAmB,QAAO,uCAAA;AAAA,EACvD,aAAY,EAAC,IAAG,cAAc,MAAK,kCAAkC,QAAO,qCAAA;AAAA,EAC5E,OAAM,EAAC,IAAG,cAAc,MAAK,kCAAkC,QAAO,qCAAA;AAAA,EACtE,QAAO,EAAC,IAAG,eAAe,MAAK,oCAAoC,QAAO,uCAAA;AAAA,EAC1E,UAAS,EAAC,IAAG,iBAAiB,MAAK,wCAAwC,QAAO,2CAAA;AAAA,EAClF,eAAc,EAAC,IAAG,iBAAiB,MAAK,wCAAwC,QAAO,2CAAA;AAAA,EACvF,UAAS,EAAC,IAAG,iBAAiB,MAAK,wCAAwC,QAAO,2CAAA;AAAA,EAClF,QAAO,EAAC,IAAG,eAAe,MAAK,oCAAoC,QAAO,uCAAA;AAAA,EAC1E,QAAO,EAAC,IAAG,eAAe,MAAK,oCAAoC,QAAO,uCAAA;AAAA,EAC1E,QAAO,EAAC,IAAG,eAAe,MAAK,oCAAoC,QAAO,uCAAA;AAAA,EAC1E,SAAQ,EAAC,IAAG,gBAAgB,MAAK,sCAAsC,QAAO,yCAAA;AAAA,EAC9E,eAAc,EAAC,IAAG,kBAAkB,MAAK,0CAA0C,QAAO,6CAAA;AAAA,EAC1F,QAAO,EAAC,IAAG,eAAe,MAAK,oCAAoC,QAAO,uCAAA;AAAA,EAC1E,cAAa,EAAC,IAAG,eAAe,MAAK,oCAAoC,QAAO,uCAAA;AAAA,EAChF,eAAc,EAAC,IAAG,gBAAgB,MAAK,sCAAsC,QAAO,yCAAA;AAAA,EACpF,UAAS,EAAC,IAAG,iBAAiB,MAAK,wCAAwC,QAAO,2CAAA;AAAA,EAClF,SAAQ,EAAC,IAAG,gBAAgB,MAAK,sCAAsC,QAAO,yCAAA;AAClF;"}
|
|
@@ -1,19 +1,18 @@
|
|
|
1
1
|
import { MaxWidth } from './../Hover';
|
|
2
2
|
import { Density } from '../Card';
|
|
3
3
|
import { Color } from '../Colors';
|
|
4
|
+
interface CardSide {
|
|
5
|
+
title?: string | null;
|
|
6
|
+
subtitle?: string | null;
|
|
7
|
+
bgColor?: string | null;
|
|
8
|
+
textColor?: string | null;
|
|
9
|
+
bgImg?: string;
|
|
10
|
+
content: string;
|
|
11
|
+
}
|
|
12
|
+
|
|
4
13
|
export interface EpFlipCardProps {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
subtitleFront?: string | null;
|
|
8
|
-
subtitleBack?: string | null;
|
|
9
|
-
bgColorFront?: string | null;
|
|
10
|
-
bgColorBack?: string | null;
|
|
11
|
-
textColorFront?: string | null;
|
|
12
|
-
textColorBack?: string | null;
|
|
13
|
-
bgImgFront?: string;
|
|
14
|
-
bgImgBack?: string;
|
|
15
|
-
contentFront: string;
|
|
16
|
-
contentBack: string;
|
|
14
|
+
front: CardSide;
|
|
15
|
+
back: CardSide;
|
|
17
16
|
trigger?: 'click' | 'hover';
|
|
18
17
|
noIndicator?: boolean;
|
|
19
18
|
density?: Density;
|