@1024pix/epreuves-components 0.4.1 → 0.4.2

package/dist/{_plugin-vue_export-helper-ne_y2ta8.js → _plugin-vue_export-helper-4Cw9-CIo.js}

@@ -3988,23 +3988,22 @@ const _l = (e, t) => {
 export {
   Ae as F,
   _l as _,
-  Ti as a,
-  Cs as b,
+  gl as a,
+  pl as b,
   al as c,
   Tr as d,
-  cl as e,
-  mo as f,
-  dl as g,
-  Ro as h,
-  Rr as i,
-  hl as j,
-  xo as k,
-  Se as l,
-  gl as m,
+  Ti as e,
+  Ro as f,
+  cl as g,
+  mo as h,
+  dl as i,
+  Rr as j,
+  hl as k,
+  xo as l,
+  vo as m,
   Ts as n,
   go as o,
-  pl as p,
-  vo as q,
+  Se as p,
   ll as r,
   fl as s,
   Wi as t,

package/dist/components/message-conversation.js

@@ -1,67 +1,67 @@
-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";
-const C = {}, B = { class: "loader" };
-function V(t, s) {
-  return n(), i("div", B);
+import { _ as f, c as i, o as t, d as x, r as N, f as v, j as S, n as h, k as u, e as p, l as b, t as _, p as $, F as y, g as k, h as A, i as M } from "../_plugin-vue_export-helper-4Cw9-CIo.js";
+const C = ".loader{width:8px;aspect-ratio:1;border-radius:50%;animation:l5 1s infinite linear alternate;transform:translate(100%)}@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){.loader{display:none}}", B = {}, V = { class: "loader" };
+function E(n, s) {
+  return t(), i("div", V);
 }
-const E = /* @__PURE__ */ x(C, [["render", V]]), F = ["part"], z = {
+const F = /* @__PURE__ */ f(B, [["render", E], ["styles", [C]]]), j = ["part"], z = {
   key: 1,
   class: "message__loader message__content",
   "aria-hidden": "true"
-}, L = ["part"], T = { key: 0 }, j = /* @__PURE__ */ b({
-  __name: "Message",
+}, L = ["part"], T = { key: 0 }, O = /* @__PURE__ */ x({
+  __name: "Message.ce",
   props: {
     displaySender: { type: Boolean, default: !0 },
-    message: {},
-    startAnimation: {},
-    animationDuration: {},
-    loadingDuration: {}
+    message: { type: Object },
+    startAnimation: { type: Number },
+    animationDuration: { type: Number },
+    loadingDuration: { type: Number }
   },
-  setup(t) {
-    const s = S("hidden"), m = v(() => t.message.content.split(`
+  setup(n) {
+    const s = N("hidden"), m = v(() => n.message.content.split(`
 `));
     function r(e) {
       return new Promise((a) => setTimeout(a, e));
     }
-    return A(async () => {
-      await r(t.startAnimation), s.value = "loading", await r(t.loadingDuration), s.value = "visible", await r(t.animationDuration);
-    }), (e, a) => (n(), i("div", {
+    return S(async () => {
+      await r(n.startAnimation), s.value = "loading", await r(n.loadingDuration), s.value = "visible", await r(n.animationDuration);
+    }), (e, a) => (t(), i("div", {
       class: h(["message", [
         `message--${e.message.direction}`,
         { "hidden-state": s.value === "hidden" }
       ]])
     }, [
-      e.displaySender ? (n(), i("p", {
+      e.displaySender ? (t(), i("p", {
         key: 0,
         class: "message__sender",
         part: `sender ${e.message.direction}`
       }, [
         a[0] || (a[0] = p("span", { class: "sr-only" }, "Message de ", -1)),
-        y(_(e.message.userName), 1)
-      ], 8, F)) : u("", !0),
-      s.value === "loading" ? (n(), i("div", z, [
-        N(E)
+        b(_(e.message.userName), 1)
+      ], 8, j)) : u("", !0),
+      s.value === "loading" ? (t(), i("div", z, [
+        $(F)
       ])) : u("", !0),
       p("p", {
         class: h(["message__content", { "hidden-state": s.value !== "visible" }]),
         part: `message ${e.message.direction}`
       }, [
-        (n(!0), i(f, null, k(m.value, (d, o) => (n(), i(f, { key: o }, [
-          o > 0 ? (n(), i("br", T)) : u("", !0),
-          y(" " + _(d), 1)
+        (t(!0), i(y, null, k(m.value, (d, o) => (t(), i(y, { key: o }, [
+          o > 0 ? (t(), i("br", T)) : u("", !0),
+          b(" " + _(d), 1)
         ], 64))), 128))
       ], 10, L)
     ], 2));
   }
-}), P = { part: "conversation" }, q = { class: "sr-only" }, G = /* @__PURE__ */ b({
+}), P = ".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}.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__ */ f(O, [["styles", [P]]]), G = { part: "conversation" }, H = { class: "sr-only" }, I = /* @__PURE__ */ x({
   __name: "MessageConversation.ce",
   props: {
     title: { default: "Conversation par messages", type: String },
     messages: { type: Array },
     animationSpeed: { default: 20, type: Number }
   },
-  setup(t) {
-    const s = 50 * t.animationSpeed, m = v(
-      () => t.messages.reduce(
+  setup(n) {
+    const s = 50 * n.animationSpeed, m = v(
+      () => n.messages.reduce(
         (e, a, d) => {
           const o = r(a);
           if (d === 0)
@@ -77,11 +77,11 @@ const E = /* @__PURE__ */ x(C, [["render", V]]), F = ["part"], z = {
       )
     );
     function r(e) {
-      return e.content.length * t.animationSpeed;
+      return e.content.length * n.animationSpeed;
     }
-    return (e, a) => (n(), i("figure", P, [
-      p("figcaption", q, _(e.title), 1),
-      (n(!0), i(f, null, k(m.value, ({ message: d, displaySender: o, startAnimation: l, animationDuration: c }, g) => (n(), $(j, {
+    return (e, a) => (t(), i("figure", G, [
+      p("figcaption", H, _(e.title), 1),
+      (t(!0), i(y, null, k(m.value, ({ message: d, displaySender: o, startAnimation: l, animationDuration: c }, g) => (t(), A(q, {
         message: d,
         "start-animation": l,
         "animation-duration": c,
@@ -91,5 +91,5 @@ const E = /* @__PURE__ */ x(C, [["render", V]]), F = ["part"], z = {
       }, null, 8, ["message", "start-animation", "animation-duration", "display-sender"]))), 128))
     ]));
   }
-}), 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]]]);
-window.customElements.define("message-conversation", M(I));
+}), J = "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:rect(0,0,0,0);white-space:nowrap;border:0}", K = /* @__PURE__ */ f(I, [["styles", [J]]]);
+window.customElements.define("message-conversation", M(K));

package/dist/components/qcu-image.js

@@ -1,64 +1,64 @@
-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";
-function z(o, s = S) {
-  const a = [...o];
-  for (let c = a.length - 1; c > 0; c--) {
-    const e = s() % (c + 1);
-    [a[c], a[e]] = [a[e], a[c]];
+import { d as y, r as w, w as C, c as l, o as n, a as g, b as h, n as x, e as k, m as $, t as v, _ as b, f as p, s as N, F as P, g as B, h as S, i as z } from "../_plugin-vue_export-helper-4Cw9-CIo.js";
+function L(c, t = j) {
+  const a = [...c];
+  for (let o = a.length - 1; o > 0; o--) {
+    const e = t() % (o + 1);
+    [a[o], a[e]] = [a[e], a[o]];
   }
   return a;
 }
-function S() {
+function j() {
   return Math.floor(Math.random() * 2 ** 32);
 }
-const L = ["aria-checked", "tabindex"], E = { key: 0 }, j = /* @__PURE__ */ w({
-  __name: "QCUChoice",
+const E = ["aria-checked", "tabindex"], I = { key: 0 }, q = /* @__PURE__ */ y({
+  __name: "ImageChoice.ce",
   props: {
-    choice: {},
-    maxChoicesPerLine: {},
-    imageClass: {},
-    nameClass: {},
+    choice: { type: Object },
+    maxChoicesPerLine: { type: Number },
+    imageClass: { type: String },
+    nameClass: { type: String },
     checked: { type: Boolean },
     focusable: { type: Boolean }
   },
   emits: ["check", "checkNext", "checkPrevious"],
-  setup(o) {
-    const s = o, a = C();
-    b(() => {
+  setup(c) {
+    const t = c, a = w();
+    C(() => {
       var e;
-      s.checked && ((e = a.value) == null || e.focus());
+      t.checked && ((e = a.value) == null || e.focus());
     });
-    const c = `qcu-image-choice-${(s.choice.response ?? s.choice.name).replace(/[^\w\-_:.]/g, "")}`;
-    return (e, i) => (t(), l("li", {
+    const o = `image-choice-${(t.choice.response ?? t.choice.name).replace(/[^\w\-_:.]/g, "")}`;
+    return (e, i) => (n(), l("li", {
       ref_key: "el",
       ref: a,
       role: "radio",
-      class: x(["qcu-image__choice", `qcu-image__choice--max${s.maxChoicesPerLine}`]),
-      "aria-labelledby": c,
+      class: x(["image-choice", `image-choice--max${t.maxChoicesPerLine}`]),
+      "aria-labelledby": o,
       "aria-checked": e.checked,
       tabindex: e.focusable ? 0 : -1,
       onClick: i[0] || (i[0] = h((r) => e.$emit("check"), ["stop"])),
       onKeydown: [
-        i[1] || (i[1] = f(h((r) => e.$emit("check"), ["stop", "prevent"]), ["enter", "space"])),
-        i[2] || (i[2] = f(h((r) => e.$emit("checkPrevious"), ["stop", "prevent"]), ["up", "left"])),
-        i[3] || (i[3] = f(h((r) => e.$emit("checkNext"), ["stop", "prevent"]), ["down", "right"]))
+        i[1] || (i[1] = g(h((r) => e.$emit("check"), ["stop", "prevent"]), ["enter", "space"])),
+        i[2] || (i[2] = g(h((r) => e.$emit("checkPrevious"), ["stop", "prevent"]), ["up", "left"])),
+        i[3] || (i[3] = g(h((r) => e.$emit("checkNext"), ["stop", "prevent"]), ["down", "right"]))
       ]
     }, [
-      e.choice.image ? (t(), l("figure", E, [
-        k("img", y(e.choice.image, {
+      e.choice.image ? (n(), l("figure", I, [
+        k("img", $(e.choice.image, {
           class: e.imageClass,
           alt: ""
         }), null, 16),
         k("figcaption", {
           class: x(e.nameClass),
-          id: c
+          id: o
         }, v(e.choice.name), 3)
-      ])) : (t(), l("span", {
+      ])) : (n(), l("span", {
         key: 1,
-        id: c
+        id: o
       }, v(e.choice.name), 1))
-    ], 42, L));
+    ], 42, E));
   }
-}), M = ["aria-label"], Q = /* @__PURE__ */ w({
+}), M = 'ul,li{padding:0;margin:0}li{list-style:none}.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}.image-choice--max4{width:calc(25% - 2em);min-width:175px}.image-choice--max3{width:calc(33% - 2em)}.image-choice--max2{width:calc(50% - 2em);min-width:300px}.image-choice--max1{width:calc(100% - 4em);min-width:300px}.image-choice:hover{cursor:pointer;box-shadow:0 3px 10px #0000001a;transform:scale(1.04);transition:transform ease-in .1s}.image-choice:focus{outline:none;box-shadow:5px 5px #ffbe00,-5px 5px #ffbe00,5px -5px #ffbe00,-5px -5px #ffbe00}.image-choice[aria-checked=true]{border-color:#3d68ff}.image-choice[aria-checked=true]:after{content:"";position:absolute;width:100%;height:100%;background:#3d68ff4d;border-radius:10px;z-index:3}.image-choice figure{width:100%;padding:0 10px;margin:3px;text-align:center}.image-choice figure img{max-width:100%;height:auto}.image-choice figure img.icon{max-height:100px;width:auto}.image-choice figure img.medium{max-width:50%;height:auto}.image-choice figure figcaption{margin:1ex}', A = /* @__PURE__ */ b(q, [["styles", [M]]]), F = ["aria-label"], K = /* @__PURE__ */ y({
   __name: "QCUImage.ce",
   props: {
     choices: { type: Array },
@@ -69,29 +69,29 @@ const L = ["aria-checked", "tabindex"], E = { key: 0 }, j = /* @__PURE__ */ w({
     imageChoicesSize: { default: "icon", type: String }
   },
   emits: ["answer"],
-  setup(o, { emit: s }) {
-    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]);
-    function u(n) {
-      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);
+  setup(c, { emit: t }) {
+    const a = t, o = p(() => c.hideChoicesName ? "sr-only" : ""), e = p(() => c.orderChoices ? c.choices : L(c.choices)), i = N(), r = p(() => i.value ?? e.value[0]);
+    function u(s) {
+      s === -1 ? i.value = e.value[e.value.length - 1] : s === e.value.length ? i.value = e.value[0] : i.value = e.value[s], a("answer", i.value.response ?? i.value.name);
     }
-    return (n, F) => (t(), l("ul", {
+    return (s, R) => (n(), l("ul", {
       role: "radiogroup",
       class: "qcu-image",
-      "aria-label": n.name
+      "aria-label": s.name
     }, [
-      (t(!0), l(q, null, $(e.value, (d, m) => (t(), P(j, {
+      (n(!0), l(P, null, B(e.value, (d, m) => (n(), S(A, {
         choice: d,
-        "max-choices-per-line": n.maxChoicesPerLine,
+        "max-choices-per-line": s.maxChoicesPerLine,
         key: m,
-        "name-class": c.value,
-        "image-class": o.imageChoicesSize,
+        "name-class": o.value,
+        "image-class": c.imageChoicesSize,
         checked: d === i.value,
         focusable: d === r.value,
-        onCheck: (p) => u(m),
-        onCheckNext: (p) => u(m + 1),
-        onCheckPrevious: (p) => u(m - 1)
+        onCheck: (f) => u(m),
+        onCheckNext: (f) => u(m + 1),
+        onCheckPrevious: (f) => u(m - 1)
       }, null, 8, ["choice", "max-choices-per-line", "name-class", "image-class", "checked", "focusable", "onCheck", "onCheckNext", "onCheckPrevious"]))), 128))
-    ], 8, M));
+    ], 8, F));
   }
-}), 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]]]);
-window.customElements.define("qcu-image", N(A));
+}), O = "*{box-sizing:border-box}.qcu-image{display:flex;width:100%;flex-wrap:wrap;justify-content:space-around;font-size:110%;font-family:Open Sans,Arial,sans-serif}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}", Q = /* @__PURE__ */ b(K, [["styles", [O]]]);
+window.customElements.define("qcu-image", z(Q));

package/dist/index.js

@@ -1,3 +1,2 @@
 import "./components/message-conversation.js";
 import "./components/qcu-image.js";
-import "./components/cartes-a-retourner.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/epreuves-components",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "A collection of interactive components to be used in Pix challenges or modules",
   "exports": {
     ".": "./dist/index.js",

package/dist/components/cartes-a-retourner.js

@@ -1,43 +0,0 @@
-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";
-const y = { class: "card-inner" }, v = /* @__PURE__ */ o({
-  __name: "CarteARetourner",
-  props: {
-    card: {}
-  },
-  setup(d) {
-    const e = l(!1);
-    return (s, r) => (a(), n("div", {
-      class: p(["card", { flipped: e.value }]),
-      onClick: r[0] || (r[0] = (i) => e.value = !e.value)
-    }, [
-      t("div", y, [
-        t("div", {
-          class: "card-face card-front",
-          style: c({ backgroundImage: `url('${s.card.frontImageUrl}')` })
-        }, null, 4),
-        t("div", {
-          class: "card-face card-back",
-          style: c({ backgroundImage: `url('${s.card.backImageUrl}')` })
-        }, null, 4)
-      ])
-    ], 2));
-  }
-}), b = /* @__PURE__ */ o({
-  __name: "CartesARetourner.ce",
-  props: {
-    cards: { type: Array },
-    cardsPerLine: { type: Number }
-  },
-  setup(d) {
-    return (e, s) => (a(), n("div", {
-      class: "container",
-      style: c({ "--cards-per-line": e.cardsPerLine })
-    }, [
-      (a(!0), n(u, null, f(e.cards, (r, i) => (a(), m(v, {
-        key: i,
-        card: r
-      }, null, 8, ["card"]))), 128))
-    ], 4));
-  }
-}), k = ".container{display:grid;grid-template-columns:repeat(var(--cards-per-line),1fr);gap:20px;justify-items:center}.card{width:150px;height:150px;perspective:1000px;cursor:pointer}.card-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s}.card.flipped .card-inner{transform:rotateY(180deg)}.card-face{width:100%;height:100%;position:absolute;backface-visibility:hidden;display:flex;justify-content:center;align-items:center;font-size:24px;border-radius:10px;background-size:cover}.card-back{transform:rotateY(180deg)}", h = /* @__PURE__ */ g(b, [["styles", [k]]]);
-window.customElements.define("cartes-a-retourner", _(h));