@1024pix/epreuves-components 0.3.1 → 0.4.1
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/_plugin-vue_export-helper-ne_y2ta8.js +4012 -0
- package/dist/components/cartes-a-retourner.js +10 -9
- package/dist/components/message-conversation.js +57 -55
- package/dist/components/qcu-image.js +57 -52
- package/package.json +1 -1
- package/dist/_plugin-vue_export-helper-Bu-qTm_e.js +0 -4049
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { d as
|
|
2
|
-
const
|
|
1
|
+
import { d as o, 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
|
+
const y = { class: "card-inner" }, v = /* @__PURE__ */ o({
|
|
3
3
|
__name: "CarteARetourner",
|
|
4
4
|
props: {
|
|
5
5
|
card: {}
|
|
@@ -8,9 +8,9 @@ const v = { class: "card-inner" }, y = /* @__PURE__ */ i({
|
|
|
8
8
|
const e = l(!1);
|
|
9
9
|
return (s, r) => (a(), n("div", {
|
|
10
10
|
class: p(["card", { flipped: e.value }]),
|
|
11
|
-
onClick: r[0] || (r[0] = (
|
|
11
|
+
onClick: r[0] || (r[0] = (i) => e.value = !e.value)
|
|
12
12
|
}, [
|
|
13
|
-
t("div",
|
|
13
|
+
t("div", y, [
|
|
14
14
|
t("div", {
|
|
15
15
|
class: "card-face card-front",
|
|
16
16
|
style: c({ backgroundImage: `url('${s.card.frontImageUrl}')` })
|
|
@@ -22,18 +22,19 @@ const v = { class: "card-inner" }, y = /* @__PURE__ */ i({
|
|
|
22
22
|
])
|
|
23
23
|
], 2));
|
|
24
24
|
}
|
|
25
|
-
}), b = /* @__PURE__ */
|
|
25
|
+
}), b = /* @__PURE__ */ o({
|
|
26
26
|
__name: "CartesARetourner.ce",
|
|
27
27
|
props: {
|
|
28
|
-
|
|
28
|
+
cards: { type: Array },
|
|
29
|
+
cardsPerLine: { type: Number }
|
|
29
30
|
},
|
|
30
31
|
setup(d) {
|
|
31
32
|
return (e, s) => (a(), n("div", {
|
|
32
33
|
class: "container",
|
|
33
|
-
style: c({ "--cards-per-line": e.
|
|
34
|
+
style: c({ "--cards-per-line": e.cardsPerLine })
|
|
34
35
|
}, [
|
|
35
|
-
(a(!0), n(u, null, f(e.
|
|
36
|
-
key:
|
|
36
|
+
(a(!0), n(u, null, f(e.cards, (r, i) => (a(), m(v, {
|
|
37
|
+
key: i,
|
|
37
38
|
card: r
|
|
38
39
|
}, null, 8, ["card"]))), 128))
|
|
39
40
|
], 4));
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { _ as
|
|
2
|
-
const
|
|
3
|
-
function
|
|
4
|
-
return
|
|
1
|
+
import { _ as x, c as i, o as n, d as b, r as S, h as v, i as A, n as h, j as u, a as p, k as y, t as _, l as N, F as f, e as k, f as $, g as M } from "../_plugin-vue_export-helper-ne_y2ta8.js";
|
|
2
|
+
const C = {}, B = { class: "loader" };
|
|
3
|
+
function V(t, s) {
|
|
4
|
+
return n(), i("div", B);
|
|
5
5
|
}
|
|
6
|
-
const
|
|
6
|
+
const E = /* @__PURE__ */ x(C, [["render", V]]), F = ["part"], z = {
|
|
7
7
|
key: 1,
|
|
8
8
|
class: "message__loader message__content",
|
|
9
9
|
"aria-hidden": "true"
|
|
10
|
-
}, L = ["part"], T = { key: 0 },
|
|
10
|
+
}, L = ["part"], T = { key: 0 }, j = /* @__PURE__ */ b({
|
|
11
11
|
__name: "Message",
|
|
12
12
|
props: {
|
|
13
13
|
displaySender: { type: Boolean, default: !0 },
|
|
@@ -16,78 +16,80 @@ const F = /* @__PURE__ */ b(B, [["render", E]]), j = ["part"], z = {
|
|
|
16
16
|
animationDuration: {},
|
|
17
17
|
loadingDuration: {}
|
|
18
18
|
},
|
|
19
|
-
setup(
|
|
20
|
-
const
|
|
19
|
+
setup(t) {
|
|
20
|
+
const s = S("hidden"), m = v(() => t.message.content.split(`
|
|
21
21
|
`));
|
|
22
|
-
function
|
|
23
|
-
return new Promise((
|
|
22
|
+
function r(e) {
|
|
23
|
+
return new Promise((a) => setTimeout(a, e));
|
|
24
24
|
}
|
|
25
25
|
return A(async () => {
|
|
26
|
-
await
|
|
27
|
-
}), (
|
|
28
|
-
class:
|
|
29
|
-
`message--${
|
|
30
|
-
{ "hidden-state":
|
|
26
|
+
await r(t.startAnimation), s.value = "loading", await r(t.loadingDuration), s.value = "visible", await r(t.animationDuration);
|
|
27
|
+
}), (e, a) => (n(), i("div", {
|
|
28
|
+
class: h(["message", [
|
|
29
|
+
`message--${e.message.direction}`,
|
|
30
|
+
{ "hidden-state": s.value === "hidden" }
|
|
31
31
|
]])
|
|
32
32
|
}, [
|
|
33
|
-
|
|
33
|
+
e.displaySender ? (n(), i("p", {
|
|
34
34
|
key: 0,
|
|
35
35
|
class: "message__sender",
|
|
36
|
-
part: `sender ${
|
|
36
|
+
part: `sender ${e.message.direction}`
|
|
37
37
|
}, [
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
], 8,
|
|
41
|
-
|
|
42
|
-
N(
|
|
43
|
-
])) :
|
|
44
|
-
|
|
45
|
-
class:
|
|
46
|
-
part: `message ${
|
|
38
|
+
a[0] || (a[0] = p("span", { class: "sr-only" }, "Message de ", -1)),
|
|
39
|
+
y(_(e.message.userName), 1)
|
|
40
|
+
], 8, F)) : u("", !0),
|
|
41
|
+
s.value === "loading" ? (n(), i("div", z, [
|
|
42
|
+
N(E)
|
|
43
|
+
])) : u("", !0),
|
|
44
|
+
p("p", {
|
|
45
|
+
class: h(["message__content", { "hidden-state": s.value !== "visible" }]),
|
|
46
|
+
part: `message ${e.message.direction}`
|
|
47
47
|
}, [
|
|
48
|
-
(
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
(n(!0), i(f, null, k(m.value, (d, o) => (n(), i(f, { key: o }, [
|
|
49
|
+
o > 0 ? (n(), i("br", T)) : u("", !0),
|
|
50
|
+
y(" " + _(d), 1)
|
|
51
51
|
], 64))), 128))
|
|
52
52
|
], 10, L)
|
|
53
53
|
], 2));
|
|
54
54
|
}
|
|
55
|
-
}), P = { part: "conversation" }, q = { class: "sr-only" }, G = /* @__PURE__ */
|
|
55
|
+
}), P = { part: "conversation" }, q = { class: "sr-only" }, G = /* @__PURE__ */ b({
|
|
56
56
|
__name: "MessageConversation.ce",
|
|
57
57
|
props: {
|
|
58
|
-
|
|
58
|
+
title: { default: "Conversation par messages", type: String },
|
|
59
|
+
messages: { type: Array },
|
|
60
|
+
animationSpeed: { default: 20, type: Number }
|
|
59
61
|
},
|
|
60
|
-
setup(
|
|
61
|
-
const
|
|
62
|
-
() =>
|
|
63
|
-
(e,
|
|
64
|
-
const
|
|
65
|
-
if (
|
|
66
|
-
return [{ message:
|
|
62
|
+
setup(t) {
|
|
63
|
+
const s = 50 * t.animationSpeed, m = v(
|
|
64
|
+
() => t.messages.reduce(
|
|
65
|
+
(e, a, d) => {
|
|
66
|
+
const o = r(a);
|
|
67
|
+
if (d === 0)
|
|
68
|
+
return [{ message: a, displaySender: !0, startAnimation: 0, animationDuration: o }];
|
|
67
69
|
const {
|
|
68
|
-
message:
|
|
69
|
-
startAnimation:
|
|
70
|
-
animationDuration:
|
|
71
|
-
} = e.at(-1),
|
|
72
|
-
return [...e, { message:
|
|
70
|
+
message: l,
|
|
71
|
+
startAnimation: c,
|
|
72
|
+
animationDuration: g
|
|
73
|
+
} = e.at(-1), w = a.direction !== l.direction || a.userName !== l.userName, D = c + g + s;
|
|
74
|
+
return [...e, { message: a, displaySender: w, startAnimation: D, animationDuration: o }];
|
|
73
75
|
},
|
|
74
76
|
[]
|
|
75
77
|
)
|
|
76
78
|
);
|
|
77
|
-
function
|
|
78
|
-
return e.content.length *
|
|
79
|
+
function r(e) {
|
|
80
|
+
return e.content.length * t.animationSpeed;
|
|
79
81
|
}
|
|
80
|
-
return (e,
|
|
81
|
-
|
|
82
|
-
(
|
|
83
|
-
message:
|
|
84
|
-
"start-animation":
|
|
85
|
-
"animation-duration":
|
|
86
|
-
"loading-duration":
|
|
87
|
-
"display-sender":
|
|
88
|
-
key:
|
|
82
|
+
return (e, a) => (n(), i("figure", P, [
|
|
83
|
+
p("figcaption", q, _(e.title), 1),
|
|
84
|
+
(n(!0), i(f, null, k(m.value, ({ message: d, displaySender: o, startAnimation: l, animationDuration: c }, g) => (n(), $(j, {
|
|
85
|
+
message: d,
|
|
86
|
+
"start-animation": l,
|
|
87
|
+
"animation-duration": c,
|
|
88
|
+
"loading-duration": s,
|
|
89
|
+
"display-sender": o,
|
|
90
|
+
key: g
|
|
89
91
|
}, null, 8, ["message", "start-animation", "animation-duration", "display-sender"]))), 128))
|
|
90
92
|
]));
|
|
91
93
|
}
|
|
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__ */
|
|
94
|
+
}), 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__ */ x(G, [["styles", [H]]]);
|
|
93
95
|
window.customElements.define("message-conversation", M(I));
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { d as
|
|
2
|
-
function
|
|
3
|
-
const
|
|
4
|
-
for (let
|
|
5
|
-
const e =
|
|
6
|
-
[
|
|
1
|
+
import { d as w, r as C, w as b, c as l, o as t, m as f, p as h, n as x, a as k, q as y, t as v, h as g, s as _, F as q, e as $, f as P, _ as B, g as N } from "../_plugin-vue_export-helper-ne_y2ta8.js";
|
|
2
|
+
function z(o, s = S) {
|
|
3
|
+
const a = [...o];
|
|
4
|
+
for (let c = a.length - 1; c > 0; c--) {
|
|
5
|
+
const e = s() % (c + 1);
|
|
6
|
+
[a[c], a[e]] = [a[e], a[c]];
|
|
7
7
|
}
|
|
8
|
-
return
|
|
8
|
+
return a;
|
|
9
9
|
}
|
|
10
|
-
function
|
|
10
|
+
function S() {
|
|
11
11
|
return Math.floor(Math.random() * 2 ** 32);
|
|
12
12
|
}
|
|
13
|
-
const
|
|
13
|
+
const L = ["aria-checked", "tabindex"], E = { key: 0 }, j = /* @__PURE__ */ w({
|
|
14
14
|
__name: "QCUChoice",
|
|
15
15
|
props: {
|
|
16
16
|
choice: {},
|
|
@@ -22,71 +22,76 @@ const M = ["aria-checked", "tabindex"], Q = { key: 0 }, S = /* @__PURE__ */ b({
|
|
|
22
22
|
},
|
|
23
23
|
emits: ["check", "checkNext", "checkPrevious"],
|
|
24
24
|
setup(o) {
|
|
25
|
-
const
|
|
26
|
-
|
|
25
|
+
const s = o, a = C();
|
|
26
|
+
b(() => {
|
|
27
27
|
var e;
|
|
28
|
-
|
|
28
|
+
s.checked && ((e = a.value) == null || e.focus());
|
|
29
29
|
});
|
|
30
|
-
const
|
|
31
|
-
return (e,
|
|
30
|
+
const c = `qcu-image-choice-${(s.choice.response ?? s.choice.name).replace(/[^\w\-_:.]/g, "")}`;
|
|
31
|
+
return (e, i) => (t(), l("li", {
|
|
32
32
|
ref_key: "el",
|
|
33
|
-
ref:
|
|
33
|
+
ref: a,
|
|
34
34
|
role: "radio",
|
|
35
|
-
class:
|
|
36
|
-
"aria-labelledby":
|
|
35
|
+
class: x(["qcu-image__choice", `qcu-image__choice--max${s.maxChoicesPerLine}`]),
|
|
36
|
+
"aria-labelledby": c,
|
|
37
37
|
"aria-checked": e.checked,
|
|
38
38
|
tabindex: e.focusable ? 0 : -1,
|
|
39
|
-
onClick:
|
|
39
|
+
onClick: i[0] || (i[0] = h((r) => e.$emit("check"), ["stop"])),
|
|
40
40
|
onKeydown: [
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
i[1] || (i[1] = f(h((r) => e.$emit("check"), ["stop", "prevent"]), ["enter", "space"])),
|
|
42
|
+
i[2] || (i[2] = f(h((r) => e.$emit("checkPrevious"), ["stop", "prevent"]), ["up", "left"])),
|
|
43
|
+
i[3] || (i[3] = f(h((r) => e.$emit("checkNext"), ["stop", "prevent"]), ["down", "right"]))
|
|
44
44
|
]
|
|
45
45
|
}, [
|
|
46
|
-
e.choice.image ? (
|
|
47
|
-
k("img",
|
|
46
|
+
e.choice.image ? (t(), l("figure", E, [
|
|
47
|
+
k("img", y(e.choice.image, {
|
|
48
48
|
class: e.imageClass,
|
|
49
49
|
alt: ""
|
|
50
50
|
}), null, 16),
|
|
51
51
|
k("figcaption", {
|
|
52
|
-
class:
|
|
53
|
-
id:
|
|
54
|
-
},
|
|
55
|
-
])) : (
|
|
52
|
+
class: x(e.nameClass),
|
|
53
|
+
id: c
|
|
54
|
+
}, v(e.choice.name), 3)
|
|
55
|
+
])) : (t(), l("span", {
|
|
56
56
|
key: 1,
|
|
57
|
-
id:
|
|
58
|
-
},
|
|
59
|
-
], 42,
|
|
57
|
+
id: c
|
|
58
|
+
}, v(e.choice.name), 1))
|
|
59
|
+
], 42, L));
|
|
60
60
|
}
|
|
61
|
-
}),
|
|
61
|
+
}), M = ["aria-label"], Q = /* @__PURE__ */ w({
|
|
62
62
|
__name: "QCUImage.ce",
|
|
63
63
|
props: {
|
|
64
|
-
|
|
64
|
+
choices: { type: Array },
|
|
65
|
+
maxChoicesPerLine: { default: 5, type: Number },
|
|
66
|
+
name: { type: String },
|
|
67
|
+
hideChoicesName: { type: Boolean },
|
|
68
|
+
orderChoices: { type: Boolean },
|
|
69
|
+
imageChoicesSize: { default: "icon", type: String }
|
|
65
70
|
},
|
|
66
71
|
emits: ["answer"],
|
|
67
|
-
setup(o, { emit:
|
|
68
|
-
const
|
|
69
|
-
function
|
|
70
|
-
|
|
72
|
+
setup(o, { emit: s }) {
|
|
73
|
+
const a = s, c = g(() => o.hideChoicesName ? "sr-only" : ""), e = g(() => o.orderChoices ? o.choices : z(o.choices)), i = _(), r = g(() => i.value ?? e.value[0]);
|
|
74
|
+
function u(n) {
|
|
75
|
+
n === -1 ? i.value = e.value[e.value.length - 1] : n === e.value.length ? i.value = e.value[0] : i.value = e.value[n], a("answer", i.value.response ?? i.value.name);
|
|
71
76
|
}
|
|
72
|
-
return (
|
|
77
|
+
return (n, F) => (t(), l("ul", {
|
|
73
78
|
role: "radiogroup",
|
|
74
79
|
class: "qcu-image",
|
|
75
|
-
"aria-label":
|
|
80
|
+
"aria-label": n.name
|
|
76
81
|
}, [
|
|
77
|
-
(
|
|
78
|
-
choice:
|
|
79
|
-
"max-choices-per-line":
|
|
80
|
-
key:
|
|
81
|
-
"name-class":
|
|
82
|
-
"image-class":
|
|
83
|
-
checked:
|
|
84
|
-
focusable:
|
|
85
|
-
onCheck: (
|
|
86
|
-
onCheckNext: (
|
|
87
|
-
onCheckPrevious: (
|
|
82
|
+
(t(!0), l(q, null, $(e.value, (d, m) => (t(), P(j, {
|
|
83
|
+
choice: d,
|
|
84
|
+
"max-choices-per-line": n.maxChoicesPerLine,
|
|
85
|
+
key: m,
|
|
86
|
+
"name-class": c.value,
|
|
87
|
+
"image-class": o.imageChoicesSize,
|
|
88
|
+
checked: d === i.value,
|
|
89
|
+
focusable: d === r.value,
|
|
90
|
+
onCheck: (p) => u(m),
|
|
91
|
+
onCheckNext: (p) => u(m + 1),
|
|
92
|
+
onCheckPrevious: (p) => u(m - 1)
|
|
88
93
|
}, null, 8, ["choice", "max-choices-per-line", "name-class", "image-class", "checked", "focusable", "onCheck", "onCheckNext", "onCheckPrevious"]))), 128))
|
|
89
|
-
], 8,
|
|
94
|
+
], 8, M));
|
|
90
95
|
}
|
|
91
|
-
}),
|
|
92
|
-
window.customElements.define("qcu-image",
|
|
96
|
+
}), U = '*{box-sizing:border-box}ul,li{padding:0;margin:0}li{list-style:none}.qcu-image{display:flex;width:100%;flex-wrap:wrap;justify-content:space-around;font-size:110%;font-family:Open Sans,Arial,sans-serif}.qcu-image__choice{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;margin:1em;border:solid 2px #c1c7d0;border-radius:10px;background:#fff;width:calc(20% - 2em);min-width:120px}.qcu-image__choice--max4{width:calc(25% - 2em);min-width:175px}.qcu-image__choice--max3{width:calc(33% - 2em)}.qcu-image__choice--max2{width:calc(50% - 2em);min-width:300px}.qcu-image__choice--max1{width:calc(100% - 4em);min-width:300px}.qcu-image__choice:hover{cursor:pointer;box-shadow:0 3px 10px #0000001a;transform:scale(1.04);transition:transform ease-in .1s}.qcu-image__choice:focus{outline:none;box-shadow:5px 5px #ffbe00,-5px 5px #ffbe00,5px -5px #ffbe00,-5px -5px #ffbe00}.qcu-image__choice[aria-checked=true]{border-color:#3d68ff}.qcu-image__choice[aria-checked=true]:after{content:"";position:absolute;width:100%;height:100%;background:#3d68ff4d;border-radius:10px;z-index:3}.qcu-image__choice figure{width:100%;padding:0 10px;margin:3px;text-align:center}.qcu-image__choice figure img{max-width:100%;height:auto}.qcu-image__choice figure img.icon{max-height:100px;width:auto}.qcu-image__choice figure img.medium{max-width:50%;height:auto}.qcu-image__choice figure figcaption{margin:1ex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}', A = /* @__PURE__ */ B(Q, [["styles", [U]]]);
|
|
97
|
+
window.customElements.define("qcu-image", N(A));
|