@1024pix/epreuves-components 0.1.0 → 0.2.0

package/dist/{_plugin-vue_export-helper-CG_vnhyz.js → _plugin-vue_export-helper-DhEI-a9q.js}

@@ -3976,9 +3976,10 @@ export {
   ll as e,
   al as f,
   hl as g,
-  pl as h,
-  dl as i,
-  Po as j,
+  bo as h,
+  pl as i,
+  dl as j,
+  Po as k,
   yo as m,
   Ts as n,
   cl as o,

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

package/dist/components/message-conversation.js

@@ -0,0 +1,33 @@
+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({
+  __name: "Message",
+  props: {
+    message: {}
+  },
+  setup(i) {
+    return (e, a) => (s(), o("article", {
+      class: m(["message", `message--${e.message.direction}`])
+    }, [
+      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)
+    ], 2));
+  }
+}), b = { part: "conversation" }, w = { class: "sr-only" }, k = /* @__PURE__ */ r({
+  __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))
+    ]));
+  }
+}), 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));

package/dist/components/qcu-image.js

@@ -1,4 +1,4 @@
-import { d as b, r as _, w as y, c as h, o as r, h as g, i as p, n as v, a as k, m as q, t as w, j as m, s as $, F as P, e as B, f as N, _ as j, g as z } from "../_plugin-vue_export-helper-CG_vnhyz.js";
+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) {
   const i = [...o];
   for (let a = i.length - 1; a > 0; a--) {
@@ -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(), h("li", {
+    return (e, s) => (r(), u("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(), h("figure", Q, [
+      e.choice.image ? (r(), u("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(), h("span", {
+      ])) : (r(), u("span", {
         key: 1,
         id: a
       }, w(e.choice.name), 1))
@@ -69,22 +69,22 @@ const M = ["aria-checked", "tabindex"], Q = { key: 0 }, S = /* @__PURE__ */ b({
     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(), h("ul", {
+    return (l, O) => (r(), u("ul", {
       role: "radiogroup",
       class: "qcu-image",
       "aria-label": l.props.name
     }, [
-      (r(!0), h(P, null, B(c.value, (f, u) => (r(), N(S, {
+      (r(!0), u(P, null, B(c.value, (f, h) => (r(), N(S, {
         choice: f,
         "max-choices-per-line": a.value,
-        key: u,
+        key: h,
         "name-class": e.value,
         "image-class": s.value,
         checked: f === t.value,
         focusable: f === C.value,
-        onCheck: (x) => d(u),
-        onCheckNext: (x) => d(u + 1),
-        onCheckPrevious: (x) => d(u - 1)
+        onCheck: (x) => d(h),
+        onCheckNext: (x) => d(h + 1),
+        onCheckPrevious: (x) => d(h - 1)
       }, null, 8, ["choice", "max-choices-per-line", "name-class", "image-class", "checked", "focusable", "onCheck", "onCheckNext", "onCheckPrevious"]))), 128))
     ], 8, U));
   }

package/dist/index.js

@@ -1,2 +1,3 @@
+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.1.0",
+  "version": "0.2.0",
   "description": "A collection of interactive components to be used in Pix challenges or modules",
   "exports": {
     ".": "./dist/index.js",