@1024pix/epreuves-components 0.6.0 → 0.8.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.
@@ -0,0 +1,122 @@
1
+ import { a as B, r as N, k as I, c as d, o as m, l as b, n as f, p as g, q as y, f as h, m as q, t as x, _ as P, s as p, v as L, x as F, F as z, b as O, e as M } from "./_plugin-vue_export-helper-FiywpteF.js";
2
+ function T(i, u = A) {
3
+ const a = [...i];
4
+ for (let n = a.length - 1; n > 0; n--) {
5
+ const l = u() % (n + 1);
6
+ [a[n], a[l]] = [a[l], a[n]];
7
+ }
8
+ return a;
9
+ }
10
+ function A() {
11
+ return Math.floor(Math.random() * 2 ** 32);
12
+ }
13
+ const K = ["aria-labelledby", "aria-selected", "tabindex"], Q = { key: 0 }, R = ["id"], D = ["id"], E = /* @__PURE__ */ B({
14
+ __name: "ImageOption.ce",
15
+ props: {
16
+ choice: { type: Object },
17
+ maxChoicesPerLine: { type: Number },
18
+ imageClass: { type: String },
19
+ nameClass: { type: String },
20
+ selected: { type: Boolean },
21
+ tabFocusable: { type: Boolean }
22
+ },
23
+ emits: ["toggle", "next", "previous"],
24
+ setup(i, { expose: u }) {
25
+ const a = i, n = N();
26
+ function l() {
27
+ n.value.focus();
28
+ }
29
+ u({ focus: l });
30
+ const s = I();
31
+ return (o, t) => (m(), d("div", {
32
+ ref_key: "el",
33
+ ref: n,
34
+ role: "option",
35
+ class: y(["image-option", `image-option--max${a.maxChoicesPerLine}`]),
36
+ "aria-labelledby": g(s),
37
+ "aria-selected": o.selected,
38
+ tabindex: o.tabFocusable ? 0 : -1,
39
+ onClick: t[0] || (t[0] = f((r) => o.$emit("toggle"), ["stop"])),
40
+ onKeydown: [
41
+ t[1] || (t[1] = b(f((r) => o.$emit("toggle"), ["stop", "prevent"]), ["space"])),
42
+ t[2] || (t[2] = b(f((r) => o.$emit("previous"), ["stop", "prevent"]), ["up", "left"])),
43
+ t[3] || (t[3] = b(f((r) => o.$emit("next"), ["stop", "prevent"]), ["down", "right"]))
44
+ ]
45
+ }, [
46
+ o.choice.image ? (m(), d("figure", Q, [
47
+ h("img", q(o.choice.image, {
48
+ class: o.imageClass,
49
+ alt: ""
50
+ }), null, 16),
51
+ h("figcaption", {
52
+ class: y(o.nameClass),
53
+ id: g(s)
54
+ }, x(o.choice.name), 11, R)
55
+ ])) : (m(), d("span", {
56
+ key: 1,
57
+ id: g(s)
58
+ }, x(o.choice.name), 9, D))
59
+ ], 42, K));
60
+ }
61
+ }), V = '.image-option{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;margin:.5rem;border:solid 2px #c1c7d0;border-radius:10px;background:#fff;width:calc(20% - 2em);min-width:150px;padding:1rem}.image-option--max4{width:calc(25% - 2em);min-width:175px}.image-option--max3{width:calc(33% - 2em)}.image-option--max2{width:calc(50% - 2em);min-width:300px}.image-option--max1{width:calc(100% - 4em);min-width:300px}.image-option:hover{cursor:pointer;box-shadow:0 3px 10px #0000001a;transform:scale(1.04);transition:transform ease-in .1s}.image-option:focus{outline:none;box-shadow:5px 5px #ffbe00,-5px 5px #ffbe00,5px -5px #ffbe00,-5px -5px #ffbe00}.image-option[aria-selected=true]{border-color:#3d68ff}.image-option[aria-selected=true]:after{content:"";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);background:#3d68ff4d;border-radius:10px;z-index:3}.image-option figure{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;margin:0;text-align:center;width:100%}.image-option figure img{max-width:100%;height:auto}.image-option figure img.icon{max-height:100px;width:auto}.image-option figure img.medium{max-width:50%;height:auto}.image-option figure figcaption{margin:1ex}', G = /* @__PURE__ */ P(E, [["styles", [V]]]), H = ["id"], J = ["aria-multiselectable", "aria-labelledby"], U = /* @__PURE__ */ B({
62
+ __name: "ImageQuiz.ce",
63
+ props: {
64
+ multiple: { type: Boolean, default: !1 },
65
+ choices: { type: Array },
66
+ maxChoicesPerLine: { default: 5, type: Number },
67
+ name: { type: String },
68
+ hideChoicesName: { type: Boolean },
69
+ orderChoices: { type: Boolean },
70
+ imageChoicesSize: { default: "icon", type: String },
71
+ showName: { type: Boolean, default: !1 }
72
+ },
73
+ emits: ["answer"],
74
+ setup(i, { emit: u }) {
75
+ const a = u, n = p(() => i.hideChoicesName ? "sr-only" : ""), l = p(() => i.orderChoices ? i.choices : T(i.choices)), s = N(new Array(i.choices.length).fill(!1)), o = p(() => l.value.filter((e, $) => s.value[$])), t = p(() => o.value.map((e) => e.response ?? e.name).sort().join(",")), r = I();
76
+ L(t, () => {
77
+ a("answer", t.value);
78
+ }, { immediate: !1 });
79
+ const S = p(() => {
80
+ const e = s.value.indexOf(!0);
81
+ return e === -1 ? 0 : e;
82
+ }), v = F("options");
83
+ function w(e) {
84
+ i.multiple || s.value.fill(!1), s.value[e] = !s.value[e];
85
+ }
86
+ function C(e) {
87
+ e = (e + i.choices.length) % i.choices.length, i.multiple || w(e), v.value[e].focus();
88
+ }
89
+ return (e, $) => (m(), d(z, null, [
90
+ h("label", {
91
+ id: g(r),
92
+ class: y(["image-quiz-label", { "sr-only": !e.showName }])
93
+ }, x(e.name), 11, H),
94
+ h("div", {
95
+ role: "listbox",
96
+ class: "image-quiz",
97
+ "aria-multiselectable": e.multiple,
98
+ "aria-labelledby": g(r),
99
+ "aria-orientation": "horizontal"
100
+ }, [
101
+ (m(!0), d(z, null, O(l.value, (j, c) => (m(), M(G, {
102
+ ref_for: !0,
103
+ ref_key: "options",
104
+ ref: v,
105
+ choice: j,
106
+ "max-choices-per-line": e.maxChoicesPerLine,
107
+ key: c,
108
+ "name-class": n.value,
109
+ "image-class": i.imageChoicesSize,
110
+ selected: s.value[c],
111
+ "tab-focusable": c === S.value,
112
+ onToggle: (k) => w(c),
113
+ onNext: (k) => C(c + 1),
114
+ onPrevious: (k) => C(c - 1)
115
+ }, null, 8, ["choice", "max-choices-per-line", "name-class", "image-class", "selected", "tab-focusable", "onToggle", "onNext", "onPrevious"]))), 128))
116
+ ], 8, J)
117
+ ], 64));
118
+ }
119
+ }), W = "*{box-sizing:border-box}.image-quiz-label{font-size:1.25rem;margin:1rem 0;display:inline-block}.image-quiz{display:flex;flex-wrap:wrap;justify-content:space-around}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}", Y = /* @__PURE__ */ P(U, [["styles", [W]]]);
120
+ export {
121
+ Y as I
122
+ };
@@ -1,4 +1,4 @@
1
- import { d as Pt, p as L, x as m2, y as p2, z as h2, A as g2, B as b2, q as y2, c as me, o as pe, n as v2, a as he, v as Ke, b as x2, t as k2, C as qe, _ as w2 } from "./_plugin-vue_export-helper-BDNE3C4u.js";
1
+ import { a as Pt, s as L, v as m2, A as p2, B as h2, C as g2, D as b2, y as y2, c as me, o as pe, q as v2, f as he, z as Ke, g as x2, t as k2, p as qe, _ as w2 } from "./_plugin-vue_export-helper-FiywpteF.js";
2
2
  /*!
3
3
  * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
4
4
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)