@1024pix/epreuves-components 2.3.0 → 2.4.1

package/package.json

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

package/dist/NavigationButton.ce-DF5ScHc4.js

@@ -1,98 +0,0 @@
-import { d as f, r as g, L as w, c as h, o as i, a as l, y as C, x as b, A as m, m as x, q as y, C as k, _ as s, e as c, N as $ } from "./_plugin-vue_export-helper-D7ghZaw4.js";
-const B = { class: "tooltip-container" }, L = ["id"], _ = ["aria-labelledby", "aria-disabled"], z = /* @__PURE__ */ f({
-  inheritAttrs: !1,
-  __name: "ButtonTooltip.ce",
-  props: {
-    disabled: { type: Boolean, default: !1 },
-    label: { type: String },
-    tooltipPosition: { default: "top", type: String }
-  },
-  emits: ["click"],
-  setup(t, { emit: o }) {
-    const e = g(!0), d = w(), u = o;
-    function a(n) {
-      e.value = n;
-    }
-    function v() {
-      t.disabled || u("click");
-    }
-    return (n, r) => (i(), h("div", B, [
-      l("p", {
-        id: b(d),
-        class: C(["tooltip", {
-          "sr-only": e.value || t.disabled,
-          [`${t.tooltipPosition}`]: !0
-        }])
-      }, m(t.label), 11, L),
-      l("button", x(n.$attrs, {
-        onMouseenter: r[0] || (r[0] = (p) => a(!1)),
-        onMouseleave: r[1] || (r[1] = (p) => a(!0)),
-        onFocusin: r[2] || (r[2] = (p) => a(!1)),
-        onFocusout: r[3] || (r[3] = (p) => a(!0)),
-        onClick: y(v, ["stop"]),
-        "aria-labelledby": b(d),
-        "aria-disabled": t.disabled,
-        class: { disabled: t.disabled }
-      }), [
-        k(n.$slots, "default")
-      ], 16, _)
-    ]));
-  }
-}), S = '*{--pix-neutral-800: #253858}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.tooltip-container{position:relative;display:grid}.tooltip-container .tooltip{position:absolute;padding:5px 7px;background:var(--pix-neutral-800);color:#fff;border-radius:4px;z-index:400;margin:0;--horizontal-shift: 12px;--tooltip-gap: 1px;--arrow-height: 6px;--arrow-width: 5px}.tooltip-container .tooltip:before{content:"";position:absolute}.tooltip-container .tooltip.top{bottom:calc(100% + var(--tooltip-gap) + var(--arrow-height));left:50%;transform:translate(calc(var(--horizontal-shift) * -1))}.tooltip-container .tooltip.top:before{top:100%;left:calc(var(--horizontal-shift) - var(--arrow-width));border-right:var(--arrow-width) solid transparent;border-left:var(--arrow-width) solid transparent;border-top:var(--arrow-height) solid var(--pix-neutral-800)}.tooltip-container .tooltip.bottom{top:calc(100% + var(--tooltip-gap) + var(--arrow-height));left:50%;transform:translate(calc(var(--horizontal-shift) * -1))}.tooltip-container .tooltip.bottom:before{bottom:100%;left:calc(var(--horizontal-shift) - var(--arrow-width));border-right:var(--arrow-width) solid transparent;border-left:var(--arrow-width) solid transparent;border-bottom:var(--arrow-height) solid var(--pix-neutral-800)}.tooltip-container .tooltip.left{right:calc(100% + var(--tooltip-gap) + var(--arrow-height));top:50%;transform:translateY(-50%)}.tooltip-container .tooltip.left:before{left:100%;top:50%;transform:translateY(-50%);border-top:var(--arrow-width) solid transparent;border-bottom:var(--arrow-width) solid transparent;border-left:var(--arrow-height) solid var(--pix-neutral-800)}.tooltip-container .tooltip.right{left:calc(100% + var(--tooltip-gap) + var(--arrow-height));top:50%;transform:translateY(-50%)}.tooltip-container .tooltip.right:before{right:100%;top:50%;transform:translateY(-50%);border-top:var(--arrow-width) solid transparent;border-bottom:var(--arrow-width) solid transparent;border-right:var(--arrow-height) solid var(--pix-neutral-800)}.tooltip-container button:hover{cursor:pointer}.tooltip-container button.disabled{color:#797e89;cursor:not-allowed;border-color:transparent;background:transparent}', H = /* @__PURE__ */ s(z, [["styles", [S]]]), M = {}, N = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16",
-  fill: "inherit"
-};
-function P(t, o) {
-  return i(), h("svg", N, [...o[0] || (o[0] = [
-    l("path", {
-      d: "M10.5642 8.75826H3.28958C3.07681 8.75826 2.89719 8.68509 2.75075 8.53875C2.60442 8.39231 2.53125 8.2127 2.53125 7.99992C2.53125 7.78714 2.60442 7.60753 2.75075 7.46109C2.89719 7.31475 3.07681 7.24159 3.28958 7.24159H10.5642L7.45292 4.13042C7.30103 3.97842 7.22719 3.80025 7.23142 3.59592C7.23564 3.39159 7.31369 3.21348 7.46558 3.06159C7.61758 2.9207 7.79575 2.84814 8.00008 2.84392C8.20442 2.8397 8.38258 2.91353 8.53458 3.06542L12.9346 7.46542C13.0091 7.54009 13.0636 7.62298 13.0981 7.71409C13.1325 7.80509 13.1498 7.90037 13.1498 7.99992C13.1498 8.09948 13.1325 8.19475 13.0981 8.28575C13.0636 8.37687 13.0091 8.45975 12.9346 8.53442L8.53058 12.9383C8.38703 13.0818 8.21164 13.1536 8.00442 13.1536C7.79719 13.1536 7.61758 13.0818 7.46558 12.9383C7.31369 12.7864 7.23775 12.6061 7.23775 12.3976C7.23775 12.189 7.31369 12.0088 7.46558 11.8568L10.5642 8.75826Z",
-      fill: "inherit"
-    }, null, -1)
-  ])]);
-}
-const A = /* @__PURE__ */ s(M, [["render", P]]), Y = {}, T = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16",
-  fill: "inherit"
-};
-function F(t, o) {
-  return i(), h("svg", T, [...o[0] || (o[0] = [
-    l("path", {
-      d: "M5.4356 8.75868L8.54693 11.8698C8.69882 12.0218 8.77265 12.2 8.76843 12.4043C8.76421 12.6087 8.68615 12.7868 8.53426 12.9387C8.38226 13.0796 8.2041 13.1521 7.99976 13.1563C7.79543 13.1606 7.61726 13.0867 7.46526 12.9348L3.06526 8.53485C2.99071 8.46018 2.93621 8.37729 2.90176 8.28618C2.86732 8.19518 2.8501 8.0999 2.8501 8.00035C2.8501 7.90079 2.86732 7.80551 2.90176 7.71451C2.93621 7.6234 2.99071 7.54051 3.06526 7.46585L7.46926 3.06201C7.61282 2.91846 7.78821 2.84668 7.99543 2.84668C8.20265 2.84668 8.38226 2.91846 8.53426 3.06201C8.68615 3.2139 8.7621 3.39412 8.7621 3.60268C8.7621 3.81124 8.68615 3.99151 8.53426 4.14351L5.4356 7.24201H12.7103C12.923 7.24201 13.1027 7.31518 13.2491 7.46151C13.3954 7.60796 13.4686 7.78757 13.4686 8.00035C13.4686 8.21312 13.3954 8.39274 13.2491 8.53918C13.1027 8.68551 12.923 8.75868 12.7103 8.75868H5.4356Z",
-      fill: "inherit"
-    }, null, -1)
-  ])]);
-}
-const Z = /* @__PURE__ */ s(Y, [["render", F]]), j = /* @__PURE__ */ f({
-  __name: "NavigationButton.ce",
-  props: {
-    disabled: { type: Boolean },
-    label: { type: String },
-    tooltipPosition: { type: String },
-    direction: { type: String }
-  },
-  emits: ["click"],
-  setup(t) {
-    return (o, e) => (i(), c(H, {
-      class: "button",
-      onClick: e[0] || (e[0] = (d) => o.$emit("click")),
-      "tooltip-position": t.tooltipPosition,
-      label: t.label,
-      disabled: t.disabled
-    }, {
-      default: $(() => [
-        t.direction === "next" ? (i(), c(A, { key: 0 })) : (i(), c(Z, { key: 1 }))
-      ]),
-      _: 1
-    }, 8, ["tooltip-position", "label", "disabled"]));
-  }
-}), q = "*{--pix-neutral-800: #253858;color:var(--pix-neutral-800)}.button{border-radius:100%;padding:4px;width:32px;height:32px;background:transparent;border:1px var(--pix-neutral-800) solid;aspect-ratio:1/1;fill:var(--pix-neutral-800);display:flex;align-items:center;justify-content:center}.button:hover{background:#c3d0ff}.button:active{background:#cdd1d9}", E = /* @__PURE__ */ s(j, [["styles", [q]]]);
-export {
-  H as B,
-  E as N
-};