@1024pix/epreuves-components 2.3.0 → 2.4.0
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/ButtonTooltip.ce-CjtFa5aM.js +44 -0
- package/dist/{LLMMessage.ce-DOzBmUDF.js → LLMMessage.ce-Cjpb0CiE.js} +7 -7
- package/dist/{Loading.ce-CiVWBT3g.js → Loading.ce-1tk4uU9c.js} +1 -1
- package/dist/NavigationButton.ce-CxI2QW8z.js +59 -0
- package/dist/{Retry-CuUMOAZi.js → Retry-CY90VQJl.js} +1 -1
- package/dist/{_plugin-vue_export-helper-D7ghZaw4.js → _plugin-vue_export-helper-DOoVeFcJ.js} +26 -26
- package/dist/components/calcul-impact.ce.js.js +11 -11
- package/dist/components/capacity-calculation.ce.js.js +31 -31
- package/dist/components/clickable-image.ce.js.js +10 -10
- package/dist/components/complete-phrase.ce.js.js +20 -20
- package/dist/components/flip-cards.ce.js.js +11 -11
- package/dist/components/image-quiz.ce.js.js +2 -2
- package/dist/components/image-quizzes.ce.js.js +2 -2
- package/dist/components/llm-compare-messages.ce.js.js +3 -3
- package/dist/components/llm-messages.ce.js.js +3 -3
- package/dist/components/llm-prompt-select.ce.js.js +4 -4
- package/dist/components/message-conversation.ce.js.js +21 -21
- package/dist/components/mobile-shell.ce.js.js +8 -5
- package/dist/components/phishing-message.ce.js.js +261 -0
- package/dist/components/phishing-notification.ce.js.js +355 -0
- package/dist/components/pix-article.ce.js.js +5 -5
- package/dist/components/pix-carousel.ce.js.js +19 -18
- package/dist/components/pix-cursor.ce.js.js +28 -28
- package/dist/components/qcm-deepfake.ce.js.js +19 -19
- package/dist/components/select-conversation.ce.js.js +104 -0
- package/dist/{i18n-CGAadjAA.js → i18n-ecSMtuba.js} +1 -1
- package/dist/{image-quiz.ce-3HDl6Z67.js → image-quiz.ce-CpI6lZ9m.js} +15 -15
- package/dist/index-4XnHmtKv.js +11905 -0
- package/dist/index.js +4 -1
- package/dist/metadata.js +44 -32
- package/dist/schema.js +63 -24
- package/dist/{shadow-dom-CFAQERh6.js → shadow-dom-DZbyKUWP.js} +1 -1
- package/dist/temporal.utils-B23shw3k.js +4958 -0
- package/package.json +1 -1
- package/dist/NavigationButton.ce-DF5ScHc4.js +0 -98
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { d as h, c as n, o, a,
|
|
2
|
-
import { u as O, a as
|
|
3
|
-
import { u as
|
|
4
|
-
import { L as
|
|
5
|
-
const
|
|
1
|
+
import { d as h, c as n, o, a, t as c, A as S, _ as f, n as P, j as A, H as N, r as y, y as m, B as z, F as x, b as k, e as v, E as q, f as M } from "../_plugin-vue_export-helper-DOoVeFcJ.js";
|
|
2
|
+
import { u as O, a as E, i as L, b as I } from "../i18n-ecSMtuba.js";
|
|
3
|
+
import { u as R } from "../normalize-props-AlmAfi_u.js";
|
|
4
|
+
import { L as B } from "../LLMMessage.ce-Cjpb0CiE.js";
|
|
5
|
+
const T = {}, V = {}, D = {}, F = {
|
|
6
6
|
"complete-phrase": { title: "Probabilité du mot suivant", description: "Quand la barre est longue, le mot a une plus forte probabilité de convenir pour continuer cette phrase.", ariaLabelDescription: "Le mot {{name}} a une probabilité de {{percent}}%", clickHereButton: "Révéler le mot", successfullyCompletedSentence: "Cliquez sur le mot choisit par l’IA dans les propositions suivantes :", feedback: { sure: "En effet, c'est le mot le plus probable !", probably: "C’est possible ! Il peut aussi choisir le mot « {{word}} », qui est très probable...", notSure: "Pas sûr... Il choisira sans doute un mot plus probable : {{words, list(style: 'long'; type: 'disjunction';)}}." } }
|
|
7
|
-
},
|
|
7
|
+
}, H = {}, Q = {}, W = { class: "probability-bar" }, U = { "aria-hidden": "true" }, G = { class: "sr-only" }, J = /* @__PURE__ */ h({
|
|
8
8
|
__name: "ProbabilityBar.ce",
|
|
9
9
|
props: {
|
|
10
10
|
name: { type: String },
|
|
11
11
|
percent: { type: Number }
|
|
12
12
|
},
|
|
13
13
|
setup(e) {
|
|
14
|
-
return (d, t) => (o(), n("div",
|
|
15
|
-
a("p",
|
|
16
|
-
a("p",
|
|
14
|
+
return (d, t) => (o(), n("div", W, [
|
|
15
|
+
a("p", U, c(e.name), 1),
|
|
16
|
+
a("p", G, c(d.$t("complete-phrase.ariaLabelDescription", { name: e.name, percent: e.percent })), 1),
|
|
17
17
|
a("div", {
|
|
18
|
-
style:
|
|
18
|
+
style: S(`width: ${e.percent}%`),
|
|
19
19
|
class: "probability-bar__percent",
|
|
20
20
|
"aria-hidden": "true"
|
|
21
21
|
}, null, 4),
|
|
@@ -111,11 +111,11 @@ const E = {}, D = {}, V = {}, F = {
|
|
|
111
111
|
a("p", pe, c(r.$t("complete-phrase.description")), 1),
|
|
112
112
|
a("section", ue, [
|
|
113
113
|
a("div", be, [
|
|
114
|
-
q(
|
|
114
|
+
q(B, {
|
|
115
115
|
class: "container__message",
|
|
116
116
|
message: { content: e.userMessage, direction: "outbound" }
|
|
117
117
|
}, null, 8, ["message"]),
|
|
118
|
-
q(
|
|
118
|
+
q(B, {
|
|
119
119
|
class: "container__message",
|
|
120
120
|
message: { content: g.value, direction: "inbound" }
|
|
121
121
|
}, null, 8, ["message"])
|
|
@@ -127,10 +127,10 @@ const E = {}, D = {}, V = {}, F = {
|
|
|
127
127
|
id: `currentProbability${b}`,
|
|
128
128
|
"aria-hidden": b !== t.value
|
|
129
129
|
}, [
|
|
130
|
-
(o(!0), n(x, null, k(u, ($,
|
|
130
|
+
(o(!0), n(x, null, k(u, ($, j) => (o(), v(X, {
|
|
131
131
|
name: $.name,
|
|
132
132
|
percent: $.percent,
|
|
133
|
-
key:
|
|
133
|
+
key: j
|
|
134
134
|
}, null, 8, ["name", "percent"]))), 128))
|
|
135
135
|
], 10, he))), 128))
|
|
136
136
|
])
|
|
@@ -150,14 +150,14 @@ const E = {}, D = {}, V = {}, F = {
|
|
|
150
150
|
]));
|
|
151
151
|
}
|
|
152
152
|
}), _e = "*{font-family:Roboto,sans-serif;color:#122647}.complete-phrase__title{font-family:Nunito,sans-serif;font-size:1.75rem;font-weight:700;line-height:36px;text-align:center}.complete-phrase__description{text-align:center;font-size:1rem;font-weight:400;line-height:24px}.complete-phrase__container{display:grid;gap:32px;grid-template-columns:3fr 2fr;margin-bottom:24px}.complete-phrase-container__conversation{background:#fff;border:1px solid #cdd1d9;border-radius:16px;display:flex;flex-direction:column;gap:32px;padding:1rem}.complete-phrase-container__conversation .message{align-items:center}.complete-phrase-container__probabilities{display:grid}.complete-phrase-container__probabilities .probability{display:flex;flex-direction:column;gap:16px;grid-row:1;grid-column:1}.complete-phrase-container__probabilities .probability.hidden{visibility:hidden}.complete-message-word:last-child{border:none;filter:blur(4px);font-weight:600;height:auto;width:auto}.complete-message-word--visible:last-child{color:inherit;filter:none;font-weight:700}.complete-message-word--hidden:last-child{background-color:#f4f5f7;border-radius:4px;border:1px dashed #5e6c84;color:transparent;display:inline-block;filter:none;padding:2px 4px}.complete-message-word:nth-last-child(2){font-weight:600}@media(max-width:600px){.complete-phrase__container{grid-template-columns:1fr}.complete-phrase-container__probabilities .probability.hidden{display:none}}", ge = /* @__PURE__ */ f(fe, [["styles", [_e]]]);
|
|
153
|
-
|
|
154
|
-
const
|
|
153
|
+
E(/* @__PURE__ */ Object.assign({ "./locales/en.json": T, "./locales/es-419.json": V, "./locales/es.json": D, "./locales/fr.json": F, "./locales/it.json": H, "./locales/nl.json": Q })).catch((e) => console.error(e));
|
|
154
|
+
const C = M(ge, {
|
|
155
155
|
configureApp(e) {
|
|
156
|
-
L.changeLanguage(document?.documentElement?.lang || navigator.language), e.use(
|
|
156
|
+
L.changeLanguage(document?.documentElement?.lang || navigator.language), e.use(I, { i18next: L });
|
|
157
157
|
}
|
|
158
158
|
});
|
|
159
|
-
|
|
159
|
+
C.prototype.normalizeProps = (e) => ({
|
|
160
160
|
...e,
|
|
161
|
-
titleLevel:
|
|
161
|
+
titleLevel: R(e.titleLevel)
|
|
162
162
|
});
|
|
163
|
-
window.customElements.define("complete-phrase",
|
|
163
|
+
window.customElements.define("complete-phrase", C);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { d as m, c as n, o as d, F as u, a as t,
|
|
1
|
+
import { d as m, c as n, o as d, F as u, a as t, n as v, h as p, t as f, B as y, _ as h, r as w, b as k, L as g, E as F, f as _ } from "../_plugin-vue_export-helper-DOoVeFcJ.js";
|
|
2
2
|
import { u as L } from "../normalize-props-AlmAfi_u.js";
|
|
3
|
-
const C = ["aria-hidden"], z = ["src"], N = ["title-level"], S = ["aria-hidden"], $ = ["aria-level"], B = { class: "description" },
|
|
3
|
+
const C = ["aria-hidden"], z = ["src"], N = ["title-level"], S = ["aria-hidden"], $ = ["aria-level"], B = { class: "description" }, E = { class: "image-container" }, U = ["src"], j = /* @__PURE__ */ m({
|
|
4
4
|
__name: "FlipCard.ce",
|
|
5
5
|
props: {
|
|
6
6
|
titleLevel: { type: Number },
|
|
@@ -39,17 +39,17 @@ const C = ["aria-hidden"], z = ["src"], N = ["title-level"], S = ["aria-hidden"]
|
|
|
39
39
|
class: "title"
|
|
40
40
|
}, f(e.name), 9, $),
|
|
41
41
|
t("p", B, f(e.description), 1),
|
|
42
|
-
t("div",
|
|
42
|
+
t("div", E, [
|
|
43
43
|
p(l) ? (d(), n("img", {
|
|
44
44
|
key: 0,
|
|
45
45
|
src: p(l),
|
|
46
46
|
alt: ""
|
|
47
|
-
}, null, 8,
|
|
47
|
+
}, null, 8, U)) : y("", !0)
|
|
48
48
|
])
|
|
49
49
|
], 10, S)
|
|
50
50
|
], 64));
|
|
51
51
|
}
|
|
52
|
-
}),
|
|
52
|
+
}), K = "[data-v-897a493f]{box-sizing:border-box}.card[data-v-897a493f]{align-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;border-radius:12px;color:#253858;display:flex;flex-direction:column;gap:1.2rem;inset:0;justify-content:center;padding:18px;position:absolute;transform:translateZ(0);transition:transform ease .5s}.card .title[data-v-897a493f]{font-family:Nunito,sans-serif;font-size:1rem;font-weight:700;line-height:29px}.card.recto.red[data-v-897a493f]{background:linear-gradient(150deg,#fff,#ff7373)}.card.recto.yellow[data-v-897a493f]{background:linear-gradient(150deg,#fff,#ffec73)}.card.recto.blue[data-v-897a493f]{background:linear-gradient(150deg,#fff,#2491ff)}.card.recto.purple[data-v-897a493f]{background:linear-gradient(150deg,#fff,#9177f2)}.card.recto.green[data-v-897a493f]{background:linear-gradient(150deg,#fff,#52d987)}.card.recto.pink[data-v-897a493f]{background:linear-gradient(150deg,#fff,#f041bf)}.card.recto .icon[data-v-897a493f]{display:block;height:auto;width:40px}.card.verso[data-v-897a493f]{line-height:1.2rem;padding:8px;text-align:center;transform:rotateY(180deg) translateZ(0)}.card.verso.flipped.red[data-v-897a493f]{border:2px solid #ff7373}.card.verso.flipped.yellow[data-v-897a493f]{border:2px solid #ffec73}.card.verso.flipped.blue[data-v-897a493f]{border:2px solid #2491ff}.card.verso.flipped.purple[data-v-897a493f]{border:2px solid #9177f2}.card.verso.flipped.green[data-v-897a493f]{border:2px solid #52d987}.card.verso.flipped.pink[data-v-897a493f]{border:2px solid #f041bf}.card.verso .description[data-v-897a493f]{font-size:.9rem;margin:0 0 8px}.card.verso .image-container[data-v-897a493f]{margin:8px 8px 16px;overflow:hidden;width:160px}.card.verso img[data-v-897a493f]{display:block;height:100%;object-fit:contain;width:100%}", V = /* @__PURE__ */ h(j, [["styles", [K]], ["__scopeId", "data-v-897a493f"]]), D = { class: "flip-cards" }, I = ["aria-level"], R = ["aria-expanded", "onClick", "onKeydown"], Y = { class: "flip-container" }, Z = /* @__PURE__ */ m({
|
|
53
53
|
__name: "FlipCards.ce",
|
|
54
54
|
props: {
|
|
55
55
|
titleLevel: { default: 2, type: Number },
|
|
@@ -66,12 +66,12 @@ const C = ["aria-hidden"], z = ["src"], N = ["title-level"], S = ["aria-hidden"]
|
|
|
66
66
|
), s = (i, c) => {
|
|
67
67
|
c.preventDefault(), i.isFlipped = !i.isFlipped;
|
|
68
68
|
};
|
|
69
|
-
return (i, c) => (d(), n("div",
|
|
69
|
+
return (i, c) => (d(), n("div", D, [
|
|
70
70
|
t("div", {
|
|
71
71
|
role: "heading",
|
|
72
72
|
"aria-level": e.titleLevel,
|
|
73
73
|
class: "sr-only"
|
|
74
|
-
}, f(e.name), 9,
|
|
74
|
+
}, f(e.name), 9, I),
|
|
75
75
|
(d(!0), n(u, null, k(l.value, (a, x) => (d(), n("div", {
|
|
76
76
|
key: x,
|
|
77
77
|
class: v(["card-container", { flipped: a.isFlipped, [a.color]: a.color }]),
|
|
@@ -84,8 +84,8 @@ const C = ["aria-hidden"], z = ["src"], N = ["title-level"], S = ["aria-hidden"]
|
|
|
84
84
|
g((r) => s(a, r), ["space"])
|
|
85
85
|
]
|
|
86
86
|
}, [
|
|
87
|
-
t("div",
|
|
88
|
-
F(
|
|
87
|
+
t("div", Y, [
|
|
88
|
+
F(V, {
|
|
89
89
|
color: a.color,
|
|
90
90
|
description: a.description,
|
|
91
91
|
icon: a.icon,
|
|
@@ -95,10 +95,10 @@ const C = ["aria-hidden"], z = ["src"], N = ["title-level"], S = ["aria-hidden"]
|
|
|
95
95
|
"title-level": e.titleLevel + 1
|
|
96
96
|
}, null, 8, ["color", "description", "icon", "image", "is-flipped", "name", "title-level"])
|
|
97
97
|
])
|
|
98
|
-
], 42,
|
|
98
|
+
], 42, R))), 128))
|
|
99
99
|
]));
|
|
100
100
|
}
|
|
101
|
-
}),
|
|
101
|
+
}), A = "[data-v-394f37d2]{box-sizing:border-box}.sr-only[data-v-394f37d2]{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.flip-cards[data-v-394f37d2]{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;max-width:100%;padding:0}.flip-cards .card-container[data-v-394f37d2]{cursor:pointer;flex:0 0 180px;height:250px;margin:0;perspective:1200px;outline:none;transform:scale(1);transition:transform ease .5s}.flip-cards .card-container[data-v-394f37d2]:hover,.flip-cards .card-container[data-v-394f37d2]:focus{transform:scale(1.05);transition:transform ease .5s;outline:none}.flip-cards .card-container .flip-container[data-v-394f37d2]{display:block;position:relative;width:100%;height:100%;padding:18px;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1);will-change:transform}.flip-cards .card-container.flipped .flip-container[data-v-394f37d2]{transform:rotateY(180deg)}", P = /* @__PURE__ */ h(Z, [["styles", [A]], ["__scopeId", "data-v-394f37d2"]]), b = _(P);
|
|
102
102
|
b.prototype.normalizeProps = (e) => ({
|
|
103
103
|
...e,
|
|
104
104
|
titleLevel: L(e.titleLevel)
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import "../_plugin-vue_export-helper-
|
|
2
|
-
import { n as p } from "../image-quiz.ce-
|
|
1
|
+
import "../_plugin-vue_export-helper-DOoVeFcJ.js";
|
|
2
|
+
import { n as p } from "../image-quiz.ce-CpI6lZ9m.js";
|
|
3
3
|
import "../normalize-props-AlmAfi_u.js";
|
|
4
4
|
export {
|
|
5
5
|
p as normalizeImageQuizProps
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { d as l, r as f, w, c as p, o, b as g, e as d, m as q, F as v, f as y } from "../_plugin-vue_export-helper-
|
|
2
|
-
import { I as A, n as I } from "../image-quiz.ce-
|
|
1
|
+
import { d as l, r as f, w, c as p, o, b as g, e as d, m as q, F as v, f as y } from "../_plugin-vue_export-helper-DOoVeFcJ.js";
|
|
2
|
+
import { I as A, n as I } from "../image-quiz.ce-CpI6lZ9m.js";
|
|
3
3
|
const _ = /* @__PURE__ */ l({
|
|
4
4
|
__name: "ImageQuizzes.ce",
|
|
5
5
|
props: {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { d as c, c as t, o as s, a as e,
|
|
2
|
-
import { L as l } from "../LLMMessage.ce-
|
|
3
|
-
import { p as u } from "../shadow-dom-
|
|
1
|
+
import { d as c, c as t, o as s, a as e, t as n, F as r, b as m, E as i, _ as p, f as g } from "../_plugin-vue_export-helper-DOoVeFcJ.js";
|
|
2
|
+
import { L as l } from "../LLMMessage.ce-Cjpb0CiE.js";
|
|
3
|
+
import { p as u } from "../shadow-dom-DZbyKUWP.js";
|
|
4
4
|
const f = {
|
|
5
5
|
class: "header",
|
|
6
6
|
"aria-hidden": "true"
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { d as c,
|
|
2
|
-
import { L as h } from "../LLMMessage.ce-
|
|
3
|
-
import { p as _ } from "../shadow-dom-
|
|
1
|
+
import { d as c, I as m, J as i, c as t, o as e, F as p, b as d, e as f, _ as g, f as u } from "../_plugin-vue_export-helper-DOoVeFcJ.js";
|
|
2
|
+
import { L as h } from "../LLMMessage.ce-Cjpb0CiE.js";
|
|
3
|
+
import { p as _ } from "../shadow-dom-DZbyKUWP.js";
|
|
4
4
|
const x = {
|
|
5
5
|
class: "llm-messages",
|
|
6
6
|
"aria-live": "polite"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { d as h, r as c,
|
|
1
|
+
import { d as h, r as c, G as y, c as d, o as m, E as w, a, H as k, F as b, b as L, t as S, _ as C, f as P } from "../_plugin-vue_export-helper-DOoVeFcJ.js";
|
|
2
2
|
import { u as N } from "../normalize-props-AlmAfi_u.js";
|
|
3
3
|
import "./llm-messages.ce.js.js";
|
|
4
|
-
const E = { class: "prompt-select" }, M = { class: "prompt-select__options" },
|
|
4
|
+
const E = { class: "prompt-select" }, M = { class: "prompt-select__options" }, B = ["disabled", "onClick"], V = /* @__PURE__ */ h({
|
|
5
5
|
__name: "LLMPromptSelect.ce",
|
|
6
6
|
props: {
|
|
7
7
|
messages: { type: Array },
|
|
@@ -58,13 +58,13 @@ const E = { class: "prompt-select" }, M = { class: "prompt-select__options" }, A
|
|
|
58
58
|
key: i,
|
|
59
59
|
disabled: n.disabled || l.value,
|
|
60
60
|
onClick: (f) => v(n)
|
|
61
|
-
}, S(n.prompt), 9,
|
|
61
|
+
}, S(n.prompt), 9, B))), 128))
|
|
62
62
|
])
|
|
63
63
|
])
|
|
64
64
|
], 64);
|
|
65
65
|
};
|
|
66
66
|
}
|
|
67
|
-
}),
|
|
67
|
+
}), z = ".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);border:0}llm-messages{display:block;height:400px}.prompt-select{font-family:Roboto,sans-serif;border-top:solid 1px #253858;padding:16px 24px 24px}.prompt-select__label{margin-top:0;font-weight:700;color:#253858}.prompt-select__options{display:flex;gap:1rem;justify-content:left;flex-wrap:wrap}.prompt-select__options>button{padding:1rem 1.5rem;border:none;background:#cec3f4;border-radius:16px;border:1px solid #ffffff;color:#130261;font-size:.875rem;box-shadow:0 4px 12px -4px #957ee833}.prompt-select__options>button:hover:not(:disabled){background:#9a8dc7;color:#fff;cursor:pointer}.prompt-select__options>button:disabled{cursor:not-allowed;color:#1010104d}", A = /* @__PURE__ */ C(V, [["styles", [z]]]), _ = P(A);
|
|
68
68
|
_.prototype.normalizeProps = (r) => ({
|
|
69
69
|
...r,
|
|
70
70
|
speed: N(r.speed)
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { d as
|
|
2
|
-
import { L } from "../Loading.ce-
|
|
1
|
+
import { d as M, r as x, y as S, v as B, c as n, o as s, n as w, B as g, a as _, H as k, t as v, E, M as z, m as P, F as b, b as N, _ as D, q as T, e as V, f as F } from "../_plugin-vue_export-helper-DOoVeFcJ.js";
|
|
2
|
+
import { L } from "../Loading.ce-1tk4uU9c.js";
|
|
3
3
|
import { u as j, a as I } from "../normalize-props-AlmAfi_u.js";
|
|
4
|
-
const O = ["part"],
|
|
4
|
+
const O = ["part"], q = {
|
|
5
5
|
key: 1,
|
|
6
6
|
class: "message__loader message__content",
|
|
7
7
|
"aria-hidden": "true"
|
|
8
|
-
},
|
|
8
|
+
}, H = ["part"], R = { key: 1 }, G = { key: 0 }, J = /* @__PURE__ */ M({
|
|
9
9
|
__name: "Message.ce",
|
|
10
10
|
props: {
|
|
11
11
|
displaySender: { type: Boolean, default: !0 },
|
|
@@ -15,7 +15,7 @@ const O = ["part"], G = {
|
|
|
15
15
|
loadingDuration: { type: Number }
|
|
16
16
|
},
|
|
17
17
|
setup(e, { expose: d }) {
|
|
18
|
-
const i = x("hidden"), l = x([]), p =
|
|
18
|
+
const i = x("hidden"), l = x([]), p = S(() => e.message.content.split(`
|
|
19
19
|
`));
|
|
20
20
|
function m(t) {
|
|
21
21
|
return new Promise((a) => {
|
|
@@ -33,7 +33,7 @@ const O = ["part"], G = {
|
|
|
33
33
|
return d({
|
|
34
34
|
reset: f
|
|
35
35
|
}), (t, a) => (s(), n("div", {
|
|
36
|
-
class:
|
|
36
|
+
class: w(["message", [
|
|
37
37
|
`message--${e.message.direction}`,
|
|
38
38
|
{ "hidden-state": i.value === "hidden" }
|
|
39
39
|
]])
|
|
@@ -44,25 +44,25 @@ const O = ["part"], G = {
|
|
|
44
44
|
part: `sender ${e.message.direction}`
|
|
45
45
|
}, [
|
|
46
46
|
a[0] || (a[0] = _("span", { class: "sr-only" }, "Message de ", -1)),
|
|
47
|
-
|
|
47
|
+
k(v(e.message.userName), 1)
|
|
48
48
|
], 8, O)) : g("", !0),
|
|
49
|
-
i.value === "loading" ? (s(), n("div",
|
|
49
|
+
i.value === "loading" ? (s(), n("div", q, [
|
|
50
50
|
E(L)
|
|
51
51
|
])) : g("", !0),
|
|
52
52
|
_("p", {
|
|
53
|
-
class:
|
|
53
|
+
class: w(["message__content", { "hidden-state": i.value !== "visible" }]),
|
|
54
54
|
part: `message ${e.message.direction}`
|
|
55
55
|
}, [
|
|
56
56
|
e.message.image ? (s(), n("img", z(P({ key: 0 }, e.message.image)), null, 16)) : g("", !0),
|
|
57
57
|
e.message.image ? (s(), n("br", R)) : g("", !0),
|
|
58
|
-
(s(!0), n(b, null,
|
|
59
|
-
r > 0 ? (s(), n("br",
|
|
60
|
-
|
|
58
|
+
(s(!0), n(b, null, N(p.value, (o, r) => (s(), n(b, { key: r }, [
|
|
59
|
+
r > 0 ? (s(), n("br", G)) : g("", !0),
|
|
60
|
+
k(" " + v(o), 1)
|
|
61
61
|
], 64))), 128))
|
|
62
|
-
], 10,
|
|
62
|
+
], 10, H)
|
|
63
63
|
], 2));
|
|
64
64
|
}
|
|
65
|
-
}),
|
|
65
|
+
}), K = ".message{max-width:80%;position:relative}.message--incoming{align-self:start}.message--incoming .message__sender{padding-left:10px}.message--incoming .message__loader{left:10px}.message--incoming .message__content{background-color:#e8e8e8}.message--outgoing{align-self:end}.message--outgoing .message__sender{padding-right:10px;text-align:right}.message--outgoing .message__loader{right:10px}.message--outgoing .message__content{background-color:#d1eaff}.message__sender{color:#444;font-size:.8rem;font-weight:700;margin:0}.message__loader{position:absolute;width:24px}.message__content{border-radius:16px;margin:0;padding:10px 14px}.message__content:not(.hidden-state){animation:fade .3s ease-in-out both}.message__content>img{max-width:100%}.hidden-state{visibility:hidden}@keyframes fade{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.message__content:not(.hidden-state){animation:none}.message__loader{display:none}.hidden-state{visibility:visible}}", Q = /* @__PURE__ */ D(J, [["styles", [K]]]), U = { part: "conversation" }, W = { class: "sr-only" }, X = /* @__PURE__ */ M({
|
|
66
66
|
__name: "MessageConversation.ce",
|
|
67
67
|
props: {
|
|
68
68
|
title: { default: "Conversation par messages", type: String },
|
|
@@ -70,7 +70,7 @@ const O = ["part"], G = {
|
|
|
70
70
|
animationSpeed: { default: 20, type: Number }
|
|
71
71
|
},
|
|
72
72
|
setup(e, { expose: d }) {
|
|
73
|
-
const i = 50 * e.animationSpeed, l = 50 * e.animationSpeed, p =
|
|
73
|
+
const i = 50 * e.animationSpeed, l = 50 * e.animationSpeed, p = S(
|
|
74
74
|
() => e.messages.reduce(
|
|
75
75
|
(t, a, o) => {
|
|
76
76
|
const r = c(a);
|
|
@@ -80,8 +80,8 @@ const O = ["part"], G = {
|
|
|
80
80
|
message: u,
|
|
81
81
|
startAnimation: y,
|
|
82
82
|
animationDuration: h
|
|
83
|
-
} = t.at(-1),
|
|
84
|
-
return [...t, { message: a, displaySender:
|
|
83
|
+
} = t.at(-1), A = a.direction !== u.direction || a.userName !== u.userName, $ = y + h + i;
|
|
84
|
+
return [...t, { message: a, displaySender: A, startAnimation: $, animationDuration: r }];
|
|
85
85
|
},
|
|
86
86
|
[]
|
|
87
87
|
)
|
|
@@ -97,7 +97,7 @@ const O = ["part"], G = {
|
|
|
97
97
|
reset: f
|
|
98
98
|
}), (t, a) => (s(), n("figure", U, [
|
|
99
99
|
_("figcaption", W, v(e.title), 1),
|
|
100
|
-
(s(!0), n(b, null,
|
|
100
|
+
(s(!0), n(b, null, N(p.value, ({ message: o, displaySender: r, startAnimation: u, animationDuration: y }, h) => (s(), V(Q, {
|
|
101
101
|
ref_for: !0,
|
|
102
102
|
ref: "messages",
|
|
103
103
|
message: o,
|
|
@@ -109,8 +109,8 @@ const O = ["part"], G = {
|
|
|
109
109
|
}, null, 8, ["message", "start-animation", "animation-duration", "display-sender"]))), 128))
|
|
110
110
|
]));
|
|
111
111
|
}
|
|
112
|
-
}), Y = "figure{background-color:#fff;border-radius:16px;display:flex;flex-direction:column;gap:8px;margin:0;padding:16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}", Z = /* @__PURE__ */
|
|
113
|
-
|
|
112
|
+
}), Y = "figure{background-color:#fff;border-radius:16px;display:flex;flex-direction:column;gap:8px;margin:0;padding:16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}", Z = /* @__PURE__ */ D(X, [["styles", [Y]]]), C = F(Z);
|
|
113
|
+
C.prototype.normalizeProps = (e) => ({
|
|
114
114
|
...e,
|
|
115
115
|
animationSpeed: j(e.animationSpeed),
|
|
116
116
|
messages: e.messages.map((d) => ({
|
|
@@ -118,4 +118,4 @@ A.prototype.normalizeProps = (e) => ({
|
|
|
118
118
|
image: I(d.image)
|
|
119
119
|
}))
|
|
120
120
|
});
|
|
121
|
-
window.customElements.define("message-conversation",
|
|
121
|
+
window.customElements.define("message-conversation", C);
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
import { d as i, c as a, o as l,
|
|
2
|
-
const m = {
|
|
1
|
+
import { d as i, c as a, o as l, D as s, a as r, j as n, A as d, n as b, _ as p, f as h } from "../_plugin-vue_export-helper-DOoVeFcJ.js";
|
|
2
|
+
const m = {
|
|
3
|
+
class: "content",
|
|
4
|
+
part: "content"
|
|
5
|
+
}, c = /* @__PURE__ */ i({
|
|
3
6
|
__name: "MobileShell.ce",
|
|
4
7
|
props: {
|
|
5
8
|
aspectRatio: { default: "1/2", type: null },
|
|
@@ -11,7 +14,7 @@ const m = { class: "content" }, c = /* @__PURE__ */ i({
|
|
|
11
14
|
return (o, t) => (l(), a("div", {
|
|
12
15
|
class: b(["mobile", { "hide-mobile-shell": !e.persistMobileShell }]),
|
|
13
16
|
part: "screen",
|
|
14
|
-
style:
|
|
17
|
+
style: d({
|
|
15
18
|
"--aspect-ratio": e.aspectRatio,
|
|
16
19
|
"--max-width": `${e.maxWidth}px`,
|
|
17
20
|
"--margin-top": `${e.marginTop}px`
|
|
@@ -19,9 +22,9 @@ const m = { class: "content" }, c = /* @__PURE__ */ i({
|
|
|
19
22
|
}, [
|
|
20
23
|
t[0] || (t[0] = s('<div class="cache-top"><div class="camera"></div></div><div class="buttons"><div class="button small"></div><div class="button long"></div><div class="button long"></div></div>', 2)),
|
|
21
24
|
r("div", m, [
|
|
22
|
-
|
|
25
|
+
n(o.$slots, "default")
|
|
23
26
|
])
|
|
24
27
|
], 6));
|
|
25
28
|
}
|
|
26
|
-
}), x = '*{box-sizing:border-box;margin:0;padding:0}.mobile{position:
|
|
29
|
+
}), x = '*{box-sizing:border-box;margin:0;padding:0}.mobile{position:relative;z-index:3;width:100%;left:50%;transform:translate(-50%);border-radius:30px;border:10px solid black;box-shadow:5px 5px 5px #0000004d;box-sizing:content-box;aspect-ratio:var(--aspect-ratio);max-width:var(--max-width);margin-top:var(--margin-top)}.mobile:before{content:"";position:absolute;z-index:1;top:-1px;left:-1px;width:100%;height:100%;border-radius:20px;box-shadow:inset 2px 2px 3px #0000004d}.mobile:after{content:"";position:absolute;top:-7px;left:-5px;width:85%;height:50%;border-top-left-radius:25px;border-top:.1rem solid rgba(255,255,255,.8);border-right:2px solid transparent;filter:blur(1px)}.content{position:absolute;width:100%;height:100%;z-index:5;border-radius:20px;-ms-overflow-style:none;scrollbar-width:none}.content::-webkit-scrollbar{display:none}.mobile .cache-top{position:absolute;z-index:6;top:0;left:32.5%;width:35%;height:15px;background:#000;border-bottom-left-radius:20px;border-bottom-right-radius:20px}.mobile .cache-top .camera{position:absolute;top:40%;right:5%;width:9%;max-width:10px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#ffffff4d}.cache-top .camera:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:25%;height:25%;border-radius:50%;background:#fff;filter:blur(1px)}.mobile .buttons{position:absolute;top:10%;left:-12.5px;height:20%;width:5px}.mobile .button{width:5px;background:#000;margin-bottom:10px;border-radius:30%}.mobile .button.small{height:15%;margin-bottom:10px}.mobile .button.long{height:30%}@media only screen and (max-width:768px){.hide-mobile-shell:after,.hide-mobile-shell .cache-top,.hide-mobile-shell .buttons{display:none}.hide-mobile-shell{border-width:0}.hide-mobile-shell .content{border:solid 2px black}}', u = /* @__PURE__ */ p(c, [["styles", [x]]]), f = h(u);
|
|
27
30
|
window.customElements.define("mobile-shell", f);
|