@1024pix/epreuves-components 0.2.0 → 0.3.0

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

@@ -1,4 +1,4 @@
-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-DhEI-a9q.js";
+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";
 const v = { class: "card-inner" }, y = /* @__PURE__ */ i({
   __name: "CarteARetourner",
   props: {

package/dist/components/message-conversation.js

@@ -1,33 +1,93 @@
-import { d as r, c as o, o as s, n as m, a as n, h as p, t, F as d, e as l, f as _, _ as u, g as f } from "../_plugin-vue_export-helper-DhEI-a9q.js";
-const h = { class: "message__sender" }, x = { class: "message__content" }, y = /* @__PURE__ */ r({
+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";
+const B = {}, V = { class: "loader" };
+function E(o, n) {
+  return a(), t("div", V);
+}
+const F = /* @__PURE__ */ b(B, [["render", E]]), j = ["part"], z = {
+  key: 1,
+  class: "message__loader message__content",
+  "aria-hidden": "true"
+}, L = ["part"], T = { key: 0 }, O = /* @__PURE__ */ v({
   __name: "Message",
   props: {
-    message: {}
+    displaySender: { type: Boolean, default: !0 },
+    message: {},
+    startAnimation: {},
+    animationDuration: {},
+    loadingDuration: {}
   },
-  setup(i) {
-    return (e, a) => (s(), o("article", {
-      class: m(["message", `message--${e.message.direction}`])
+  setup(o) {
+    const n = $("hidden"), c = k(() => o.message.content.split(`
+`));
+    function d(s) {
+      return new Promise((e) => setTimeout(e, s));
+    }
+    return A(async () => {
+      await d(o.startAnimation), n.value = "loading", await d(o.loadingDuration), n.value = "visible", await d(o.animationDuration);
+    }), (s, e) => (a(), t("div", {
+      class: y(["message", [
+        `message--${s.message.direction}`,
+        { "hidden-state": n.value === "hidden" }
+      ]])
     }, [
-      n("p", h, [
-        a[0] || (a[0] = n("span", { class: "sr-only" }, "Message de ", -1)),
-        p(t(e.message.userName), 1)
-      ]),
-      n("p", x, t(e.message.content), 1)
+      s.displaySender ? (a(), t("p", {
+        key: 0,
+        class: "message__sender",
+        part: `sender ${s.message.direction}`
+      }, [
+        e[0] || (e[0] = _("span", { class: "sr-only" }, "Message de ", -1)),
+        x(f(s.message.userName), 1)
+      ], 8, j)) : p("", !0),
+      n.value === "loading" ? (a(), t("div", z, [
+        N(F)
+      ])) : p("", !0),
+      _("p", {
+        class: y(["message__content", { "hidden-state": n.value !== "visible" }]),
+        part: `message ${s.message.direction}`
+      }, [
+        (a(!0), t(h, null, w(c.value, (i, r) => (a(), t(h, { key: r }, [
+          r > 0 ? (a(), t("br", T)) : p("", !0),
+          x(" " + f(i), 1)
+        ], 64))), 128))
+      ], 10, L)
     ], 2));
   }
-}), b = { part: "conversation" }, w = { class: "sr-only" }, k = /* @__PURE__ */ r({
+}), P = { part: "conversation" }, q = { class: "sr-only" }, G = /* @__PURE__ */ v({
   __name: "MessageConversation.ce",
   props: {
     props: { type: Object }
   },
-  setup(i) {
-    return (e, a) => (s(), o("figure", b, [
-      n("figcaption", w, t(e.props.title ?? "Conversation par messages"), 1),
-      (s(!0), o(d, null, l(e.props.messages, (g, c) => (s(), _(y, {
-        message: g,
-        key: c
-      }, null, 8, ["message"]))), 128))
+  setup(o) {
+    const n = o.props.animationSpeed ?? 20, c = 50 * n, d = k(
+      () => o.props.messages.reduce(
+        (e, i, r) => {
+          const l = s(i);
+          if (r === 0)
+            return [{ message: i, displaySender: !0, startAnimation: 0, animationDuration: l }];
+          const {
+            message: m,
+            startAnimation: g,
+            animationDuration: u
+          } = e.at(-1), D = i.direction !== m.direction || i.userName !== m.userName, S = g + u + c;
+          return [...e, { message: i, displaySender: D, startAnimation: S, animationDuration: l }];
+        },
+        []
+      )
+    );
+    function s(e) {
+      return e.content.length * n;
+    }
+    return (e, i) => (a(), t("figure", P, [
+      _("figcaption", q, f(e.props.title ?? "Conversation par messages"), 1),
+      (a(!0), t(h, null, w(d.value, ({ message: r, displaySender: l, startAnimation: m, animationDuration: g }, u) => (a(), C(O, {
+        message: r,
+        "start-animation": m,
+        "animation-duration": g,
+        "loading-duration": c,
+        "display-sender": l,
+        key: u
+      }, null, 8, ["message", "start-animation", "animation-duration", "display-sender"]))), 128))
     ]));
   }
-}), v = "figure{background-color:#fff;border-radius:16px;display:flex;flex-direction:column;gap:8px;margin:0;padding:16px}.message{max-width:80%}.message--incoming{align-self:start}.message--incoming .message__sender{padding-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__content{background-color:#d1eaff}.message__sender{color:#444;font-size:.8rem;font-weight:700;margin:0}.message__content{border-radius:16px;margin:0;padding:10px 14px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}", C = /* @__PURE__ */ u(k, [["styles", [v]]]);
-window.customElements.define("message-conversation", f(C));
+}), 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]]]);
+window.customElements.define("message-conversation", M(I));

package/dist/components/qcu-image.js

@@ -1,5 +1,5 @@
-import { d as b, r as _, w as y, c as u, o as r, i as g, j as p, n as v, a as k, m as q, t as w, k as m, s as $, F as P, e as B, f as N, _ as j, g as z } from "../_plugin-vue_export-helper-DhEI-a9q.js";
-function L(o, n = E) {
+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";
+function j(o, n = E) {
   const i = [...o];
   for (let a = i.length - 1; a > 0; a--) {
     const e = n() % (a + 1);
@@ -28,7 +28,7 @@ const M = ["aria-checked", "tabindex"], Q = { key: 0 }, S = /* @__PURE__ */ b({
       n.checked && ((e = i.value) == null || e.focus());
     });
     const a = `qcu-image-choice-${(n.choice.response ?? n.choice.name).replace(/[^\w\-_:.]/g, "")}`;
-    return (e, s) => (r(), u("li", {
+    return (e, s) => (r(), h("li", {
       ref_key: "el",
       ref: i,
       role: "radio",
@@ -43,7 +43,7 @@ const M = ["aria-checked", "tabindex"], Q = { key: 0 }, S = /* @__PURE__ */ b({
         s[3] || (s[3] = g(p((c) => e.$emit("checkNext"), ["stop", "prevent"]), ["down", "right"]))
       ]
     }, [
-      e.choice.image ? (r(), u("figure", Q, [
+      e.choice.image ? (r(), h("figure", Q, [
         k("img", q(e.choice.image, {
           class: e.imageClass,
           alt: ""
@@ -52,7 +52,7 @@ const M = ["aria-checked", "tabindex"], Q = { key: 0 }, S = /* @__PURE__ */ b({
           class: v(e.nameClass),
           id: a
         }, w(e.choice.name), 3)
-      ])) : (r(), u("span", {
+      ])) : (r(), h("span", {
         key: 1,
         id: a
       }, w(e.choice.name), 1))
@@ -65,28 +65,28 @@ const M = ["aria-checked", "tabindex"], Q = { key: 0 }, S = /* @__PURE__ */ b({
   },
   emits: ["answer"],
   setup(o, { emit: n }) {
-    const i = n, a = m(() => o.props.maxChoicesPerLine ?? 5), e = m(() => o.props.hideChoicesName ? "sr-only" : ""), s = m(() => o.props.imageChoicesSize ?? "icon"), c = m(() => o.props.orderChoices ? o.props.choices : L(o.props.choices)), t = $(), C = m(() => t.value ?? c.value[0]);
+    const i = n, a = m(() => o.props.maxChoicesPerLine ?? 5), e = m(() => o.props.hideChoicesName ? "sr-only" : ""), s = m(() => o.props.imageChoicesSize ?? "icon"), c = m(() => o.props.orderChoices ? o.props.choices : j(o.props.choices)), t = $(), C = m(() => t.value ?? c.value[0]);
     function d(l) {
       l === -1 ? t.value = c.value[c.value.length - 1] : l === c.value.length ? t.value = c.value[0] : t.value = c.value[l], i("answer", t.value.response ?? t.value.name);
     }
-    return (l, O) => (r(), u("ul", {
+    return (l, O) => (r(), h("ul", {
       role: "radiogroup",
       class: "qcu-image",
       "aria-label": l.props.name
     }, [
-      (r(!0), u(P, null, B(c.value, (f, h) => (r(), N(S, {
+      (r(!0), h(P, null, B(c.value, (f, u) => (r(), N(S, {
         choice: f,
         "max-choices-per-line": a.value,
-        key: h,
+        key: u,
         "name-class": e.value,
         "image-class": s.value,
         checked: f === t.value,
         focusable: f === C.value,
-        onCheck: (x) => d(h),
-        onCheckNext: (x) => d(h + 1),
-        onCheckPrevious: (x) => d(h - 1)
+        onCheck: (x) => d(u),
+        onCheckNext: (x) => d(u + 1),
+        onCheckPrevious: (x) => d(u - 1)
       }, null, 8, ["choice", "max-choices-per-line", "name-class", "image-class", "checked", "focusable", "onCheck", "onCheckNext", "onCheckPrevious"]))), 128))
     ], 8, U));
   }
-}), I = '*{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}', K = /* @__PURE__ */ j(F, [["styles", [I]]]);
-window.customElements.define("qcu-image", z(K));
+}), I = '*{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}', K = /* @__PURE__ */ z(F, [["styles", [I]]]);
+window.customElements.define("qcu-image", L(K));

package/package.json

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