@1024pix/epreuves-components 0.2.1 → 0.3.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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { d as i, r as l, c as n, o as a, n as p, a as t, b as c, F as u, e as f, f as m, _ as g, g as _ } from "../_plugin-vue_export-helper-
|
|
1
|
+
import { d as i, r as l, c as n, o as a, n as p, a as t, b as c, F as u, e as f, f as m, _ as g, g as _ } from "../_plugin-vue_export-helper-ne_y2ta8.js";
|
|
2
2
|
const v = { class: "card-inner" }, y = /* @__PURE__ */ i({
|
|
3
3
|
__name: "CarteARetourner",
|
|
4
4
|
props: {
|
|
@@ -1,59 +1,93 @@
|
|
|
1
|
-
import {
|
|
2
|
-
const
|
|
1
|
+
import { _ as b, c as t, o as a, d as v, r as $, h as k, i as A, n as y, j as p, a as _, k as x, t as f, l as N, F as h, e as w, f as C, g as M } from "../_plugin-vue_export-helper-ne_y2ta8.js";
|
|
2
|
+
const B = {}, V = { class: "loader" };
|
|
3
|
+
function E(o, n) {
|
|
4
|
+
return a(), t("div", V);
|
|
5
|
+
}
|
|
6
|
+
const F = /* @__PURE__ */ b(B, [["render", E]]), j = ["part"], z = {
|
|
7
|
+
key: 1,
|
|
8
|
+
class: "message__loader message__content",
|
|
9
|
+
"aria-hidden": "true"
|
|
10
|
+
}, L = ["part"], T = { key: 0 }, O = /* @__PURE__ */ v({
|
|
3
11
|
__name: "Message",
|
|
4
12
|
props: {
|
|
5
13
|
displaySender: { type: Boolean, default: !0 },
|
|
6
|
-
message: {}
|
|
14
|
+
message: {},
|
|
15
|
+
startAnimation: {},
|
|
16
|
+
animationDuration: {},
|
|
17
|
+
loadingDuration: {}
|
|
7
18
|
},
|
|
8
|
-
setup(
|
|
9
|
-
const
|
|
19
|
+
setup(o) {
|
|
20
|
+
const n = $("hidden"), c = k(() => o.message.content.split(`
|
|
10
21
|
`));
|
|
11
|
-
|
|
12
|
-
|
|
22
|
+
function d(s) {
|
|
23
|
+
return new Promise((e) => setTimeout(e, s));
|
|
24
|
+
}
|
|
25
|
+
return A(async () => {
|
|
26
|
+
await d(o.startAnimation), n.value = "loading", await d(o.loadingDuration), n.value = "visible", await d(o.animationDuration);
|
|
27
|
+
}), (s, e) => (a(), t("div", {
|
|
28
|
+
class: y(["message", [
|
|
29
|
+
`message--${s.message.direction}`,
|
|
30
|
+
{ "hidden-state": n.value === "hidden" }
|
|
31
|
+
]])
|
|
13
32
|
}, [
|
|
14
|
-
|
|
33
|
+
s.displaySender ? (a(), t("p", {
|
|
15
34
|
key: 0,
|
|
16
35
|
class: "message__sender",
|
|
17
|
-
part: `sender ${
|
|
36
|
+
part: `sender ${s.message.direction}`
|
|
18
37
|
}, [
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
], 8,
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
38
|
+
e[0] || (e[0] = _("span", { class: "sr-only" }, "Message de ", -1)),
|
|
39
|
+
x(f(s.message.userName), 1)
|
|
40
|
+
], 8, j)) : p("", !0),
|
|
41
|
+
n.value === "loading" ? (a(), t("div", z, [
|
|
42
|
+
N(F)
|
|
43
|
+
])) : p("", !0),
|
|
44
|
+
_("p", {
|
|
45
|
+
class: y(["message__content", { "hidden-state": n.value !== "visible" }]),
|
|
46
|
+
part: `message ${s.message.direction}`
|
|
25
47
|
}, [
|
|
26
|
-
(
|
|
27
|
-
|
|
28
|
-
|
|
48
|
+
(a(!0), t(h, null, w(c.value, (i, r) => (a(), t(h, { key: r }, [
|
|
49
|
+
r > 0 ? (a(), t("br", T)) : p("", !0),
|
|
50
|
+
x(" " + f(i), 1)
|
|
29
51
|
], 64))), 128))
|
|
30
|
-
],
|
|
52
|
+
], 10, L)
|
|
31
53
|
], 2));
|
|
32
54
|
}
|
|
33
|
-
}),
|
|
55
|
+
}), P = { part: "conversation" }, q = { class: "sr-only" }, G = /* @__PURE__ */ v({
|
|
34
56
|
__name: "MessageConversation.ce",
|
|
35
57
|
props: {
|
|
36
58
|
props: { type: Object }
|
|
37
59
|
},
|
|
38
|
-
setup(
|
|
39
|
-
const
|
|
40
|
-
() =>
|
|
41
|
-
(e,
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
60
|
+
setup(o) {
|
|
61
|
+
const n = o.props.animationSpeed ?? 20, c = 50 * n, d = k(
|
|
62
|
+
() => o.props.messages.reduce(
|
|
63
|
+
(e, i, r) => {
|
|
64
|
+
const l = s(i);
|
|
65
|
+
if (r === 0)
|
|
66
|
+
return [{ message: i, displaySender: !0, startAnimation: 0, animationDuration: l }];
|
|
67
|
+
const {
|
|
68
|
+
message: m,
|
|
69
|
+
startAnimation: g,
|
|
70
|
+
animationDuration: u
|
|
71
|
+
} = e.at(-1), D = i.direction !== m.direction || i.userName !== m.userName, S = g + u + c;
|
|
72
|
+
return [...e, { message: i, displaySender: D, startAnimation: S, animationDuration: l }];
|
|
45
73
|
},
|
|
46
74
|
[]
|
|
47
75
|
)
|
|
48
76
|
);
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
77
|
+
function s(e) {
|
|
78
|
+
return e.content.length * n;
|
|
79
|
+
}
|
|
80
|
+
return (e, i) => (a(), t("figure", P, [
|
|
81
|
+
_("figcaption", q, f(e.props.title ?? "Conversation par messages"), 1),
|
|
82
|
+
(a(!0), t(h, null, w(d.value, ({ message: r, displaySender: l, startAnimation: m, animationDuration: g }, u) => (a(), C(O, {
|
|
83
|
+
message: r,
|
|
84
|
+
"start-animation": m,
|
|
85
|
+
"animation-duration": g,
|
|
86
|
+
"loading-duration": c,
|
|
87
|
+
"display-sender": l,
|
|
88
|
+
key: u
|
|
89
|
+
}, null, 8, ["message", "start-animation", "animation-duration", "display-sender"]))), 128))
|
|
56
90
|
]));
|
|
57
91
|
}
|
|
58
|
-
}),
|
|
59
|
-
window.customElements.define("message-conversation",
|
|
92
|
+
}), H = "figure{background-color:#fff;border-radius:16px;display:flex;flex-direction:column;gap:8px;margin:0;padding:16px}.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}.loader{width:8px;aspect-ratio:1;border-radius:50%;animation:l5 1s infinite linear alternate;transform:translate(100%)}.hidden-state{visibility:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes l5{0%{box-shadow:13px 0 #000,-13px 0 #0002;background:#000}33%{box-shadow:13px 0 #000,-13px 0 #0002;background:#0002}66%{box-shadow:13px 0 #0002,-13px 0 #000;background:#0002}to{box-shadow:13px 0 #0002,-13px 0 #000;background:#000}}@media (prefers-reduced-motion: reduce){.message__content:not(.hidden-state){animation:none}.loader,.message__loader{display:none}.hidden-state{visibility:visible}}", I = /* @__PURE__ */ b(G, [["styles", [H]]]);
|
|
93
|
+
window.customElements.define("message-conversation", M(I));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { d as b, r as _, w as y, c as h, o as r,
|
|
1
|
+
import { d as b, r as _, w as y, c as h, o as r, m as g, p, n as v, a as k, q, t as w, h as m, s as $, F as P, e as B, f as N, _ as z, g as L } from "../_plugin-vue_export-helper-ne_y2ta8.js";
|
|
2
2
|
function j(o, n = E) {
|
|
3
3
|
const i = [...o];
|
|
4
4
|
for (let a = i.length - 1; a > 0; a--) {
|