@1024pix/epreuves-components 0.6.0 → 0.8.0

package/dist/components/qcu-image.ce.js.js

@@ -1,97 +0,0 @@
-import { d as y, f as w, j as C, c as l, o as n, k as p, l as h, n as x, a as k, m as $, t as v, _ as b, p as g, s as N, F as P, r as B, i as S, e as z } from "../_plugin-vue_export-helper-BDNE3C4u.js";
-function j(c, t = L) {
-  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 L() {
-  return Math.floor(Math.random() * 2 ** 32);
-}
-const E = ["aria-checked", "tabindex"], I = { key: 0 }, q = /* @__PURE__ */ y({
-  __name: "ImageChoice.ce",
-  props: {
-    choice: { type: Object },
-    maxChoicesPerLine: { type: Number },
-    imageClass: { type: String },
-    nameClass: { type: String },
-    checked: { type: Boolean },
-    focusable: { type: Boolean }
-  },
-  emits: ["check", "checkNext", "checkPrevious"],
-  setup(c) {
-    const t = c, a = w();
-    C(() => {
-      var e;
-      t.checked && ((e = a.value) == null || e.focus());
-    });
-    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(["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] = p(h((r) => e.$emit("check"), ["stop", "prevent"]), ["enter", "space"])),
-        i[2] || (i[2] = p(h((r) => e.$emit("checkPrevious"), ["stop", "prevent"]), ["up", "left"])),
-        i[3] || (i[3] = p(h((r) => e.$emit("checkNext"), ["stop", "prevent"]), ["down", "right"]))
-      ]
-    }, [
-      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: o
-        }, v(e.choice.name), 3)
-      ])) : (n(), l("span", {
-        key: 1,
-        id: o
-      }, v(e.choice.name), 1))
-    ], 42, E));
-  }
-}), 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 },
-    maxChoicesPerLine: { default: 5, type: Number },
-    name: { type: String },
-    hideChoicesName: { type: Boolean },
-    orderChoices: { type: Boolean },
-    imageChoicesSize: { default: "icon", type: String }
-  },
-  emits: ["answer"],
-  setup(c, { emit: t }) {
-    const a = t, o = g(() => c.hideChoicesName ? "sr-only" : ""), e = g(() => c.orderChoices ? c.choices : j(c.choices)), i = N(), r = g(() => 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 (s, R) => (n(), l("ul", {
-      role: "radiogroup",
-      class: "qcu-image",
-      "aria-label": s.name
-    }, [
-      (n(!0), l(P, null, B(e.value, (d, m) => (n(), S(A, {
-        choice: d,
-        "max-choices-per-line": s.maxChoicesPerLine,
-        key: m,
-        "name-class": o.value,
-        "image-class": c.imageChoicesSize,
-        checked: d === i.value,
-        focusable: d === r.value,
-        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, F));
-  }
-}), 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));