@gxp-dev/mod-ui 2.0.10 → 2.0.14

package/dist/components/compositions/elements/builder/QuizBuilder.vue.js

@@ -1,594 +0,0 @@
-import { defineComponent as oe, useModel as le, ref as ie, computed as v, onMounted as se, watch as de, openBlock as r, createElementBlock as u, normalizeClass as M, unref as o, createElementVNode as d, toDisplayString as b, createVNode as l, withCtx as s, createTextVNode as n, Fragment as k, renderList as z, createCommentVNode as g, createBlock as T, mergeModels as ae } from "vue";
-import { Plus as h, X as ne, Trash2 as j } from "lucide-vue-next";
-import "../../../ui/badge/index.js";
-import "../../../ui/button/index.js";
-import "../../../ui/card/index.js";
-import x from "../../../ui/input/Input.vue.js";
-import "../../../ui/label/index.js";
-import re from "../../../ui/select/Select.vue.js";
-import ue from "../../../ui/select/SelectContent.vue.js";
-import "@vueuse/core";
-import "reka-ui";
-import { cn as pe } from "../../../../lib/utils.js";
-import w from "../../../ui/select/SelectItem.vue.js";
-import ce from "../../../ui/select/SelectTrigger.vue.js";
-import fe from "../../../ui/select/SelectValue.vue.js";
-import "../../../ui/switch/index.js";
-import N from "../../../ui/textarea/Textarea.vue.js";
-import { useQuizBuilder as me } from "../../../../stores/quizBuilderStore.js";
-import _ from "../../../ui/button/Button.vue.js";
-import O from "../../../ui/badge/Badge.vue.js";
-import C from "../../../ui/card/Card.vue.js";
-import I from "../../../ui/card/CardContent.vue.js";
-import f from "../../../ui/label/Label.vue.js";
-import F from "../../../ui/card/CardHeader.vue.js";
-import L from "../../../ui/card/CardTitle.vue.js";
-import R from "../../../ui/switch/Switch.vue.js";
-const be = ["data-element-name"], ve = {
-  class: "flex flex-col gap-2 border-r p-3 overflow-y-auto",
-  "data-testid": "quiz-builder-palette"
-}, xe = { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, ge = { class: "flex flex-col gap-1" }, _e = ["data-testid", "disabled", "onClick"], ye = { class: "font-medium" }, qe = {
-  key: 0,
-  class: "text-xs text-muted-foreground"
-}, ke = {
-  key: 1,
-  class: "flex flex-col gap-0.5 text-xs text-destructive",
-  role: "alert"
-}, ze = {
-  class: "flex flex-col gap-3 overflow-y-auto p-3",
-  "data-testid": "quiz-builder-canvas"
-}, $e = { class: "flex items-center justify-between" }, he = { class: "flex flex-col gap-1" }, we = { class: "flex flex-col gap-1" }, Ce = { class: "flex flex-col gap-1" }, Ie = {
-  key: 0,
-  class: "py-6 text-center text-xs text-muted-foreground",
-  "data-testid": "quiz-builder-canvas-empty"
-}, Se = {
-  key: 1,
-  class: "flex flex-col gap-1 text-xs",
-  "data-testid": "quiz-builder-canvas-list"
-}, Ve = ["data-testid", "onClick"], Qe = { class: "w-6 text-right tabular-nums text-muted-foreground" }, Be = { class: "flex min-w-0 flex-col" }, Ae = { class: "truncate font-medium" }, Me = { class: "text-[10px] text-muted-foreground" }, Te = {
-  class: "flex flex-col gap-2 overflow-y-auto border-l p-3",
-  "data-testid": "quiz-builder-inspector"
-}, je = { class: "flex items-center justify-between" }, Ne = {
-  key: 0,
-  class: "py-3 text-xs text-muted-foreground",
-  "data-testid": "quiz-builder-inspector-empty"
-}, Oe = {
-  key: 1,
-  class: "flex flex-col gap-3",
-  "data-testid": "quiz-builder-inspector-fields"
-}, Fe = { class: "flex flex-col gap-1" }, Le = { class: "flex flex-col gap-1" }, Re = { class: "flex flex-col gap-1" }, Ue = { class: "flex items-center justify-between rounded border bg-background px-2 py-1" }, De = ["data-testid"], Pe = { class: "grid grid-cols-2 gap-1" }, Ee = { class: "flex flex-col gap-1" }, He = { class: "flex flex-col gap-1" }, Xe = { class: "grid grid-cols-2 items-center gap-1" }, Ge = { class: "flex items-center justify-between rounded border bg-background px-2 py-1" }, Je = { class: "flex flex-col gap-1" }, Ke = {
-  key: 0,
-  class: "py-2 text-center text-xs text-muted-foreground"
-}, $t = /* @__PURE__ */ oe({
-  __name: "QuizBuilder",
-  props: /* @__PURE__ */ ae({
-    modelValue: {},
-    builderId: {},
-    label: {},
-    name: {},
-    item: { default: () => ({}) },
-    classList: {},
-    helpText: {},
-    errors: { default: () => [] },
-    hideLabel: { type: Boolean },
-    required: { type: Boolean },
-    readonly: { type: Boolean },
-    disabled: { type: Boolean }
-  }, {
-    modelValue: {},
-    modelModifiers: {}
-  }),
-  emits: ["update:modelValue"],
-  setup(S) {
-    const c = S, V = le(S, "modelValue");
-    let Q = 0;
-    function U() {
-      return Q += 1, `quiz-builder-${Date.now()}-${Q}`;
-    }
-    const D = ie(U()), P = v(() => c.builderId ?? D.value), a = me(P.value);
-    function E(i) {
-      return typeof i != "object" || i === null ? !1 : Array.isArray(i.questions);
-    }
-    se(() => {
-      const i = V.value;
-      E(i) && a.loadSchema(i);
-    }), de(
-      () => a.schema.value,
-      (i) => {
-        V.value = {
-          title: i.title,
-          description: i.description,
-          passingScore: i.passingScore,
-          questions: i.questions.map((e) => ({
-            ...e,
-            options: e.options.map((t) => ({ ...t }))
-          }))
-        };
-      },
-      { deep: !0 }
-    );
-    const H = [
-      { type: "single-choice", label: "Single choice" },
-      { type: "multi-choice", label: "Multi choice" },
-      { type: "free-text", label: "Free text" }
-    ], $ = v(
-      () => a.schema.value.questions
-    ), X = v(() => a.schema.value.title ?? ""), G = v(
-      () => a.schema.value.description ?? ""
-    ), J = v(
-      () => a.schema.value.passingScore ?? 0
-    ), m = v(() => {
-      const i = a.selection.value;
-      return i.id ? $.value.find((e) => e.id === i.id) ?? null : null;
-    }), K = v(() => {
-      const i = m.value;
-      return !!(i && i.type !== "free-text");
-    });
-    function B(i) {
-      const e = a.addQuestion(i);
-      a.select(e);
-    }
-    function W(i) {
-      a.select(i);
-    }
-    function Y() {
-      const i = a.selection.value;
-      i.id && a.removeQuestion(i.id);
-    }
-    function Z() {
-      a.select(null);
-    }
-    function y(i) {
-      const e = a.selection.value;
-      e.id && a.updateQuestion(e.id, i);
-    }
-    function ee() {
-      const i = a.selection.value;
-      i.id && a.addOption(i.id);
-    }
-    function te(i) {
-      const e = a.selection.value;
-      e.id && a.removeOption(e.id, i);
-    }
-    function q(i, e) {
-      const t = a.selection.value;
-      t.id && a.updateOption(t.id, i, e);
-    }
-    function A(i) {
-      const e = Number.parseFloat(i);
-      return Number.isFinite(e) ? e : 0;
-    }
-    return (i, e) => (r(), u("div", {
-      class: M(
-        o(pe)(
-          "gxp-quiz-builder grid gap-3 rounded-lg border bg-card",
-          c.classList
-        )
-      ),
-      style: { "grid-template-columns": "220px 1fr 320px", "min-height": "24rem" },
-      "data-testid": "quiz-builder",
-      "data-element-name": c.name ?? void 0
-    }, [
-      d("aside", ve, [
-        d("h4", xe, b(c.label ?? "Question palette"), 1),
-        l(o(_), {
-          type: "button",
-          variant: "outline",
-          size: "sm",
-          class: "justify-start gap-2",
-          "data-testid": "quiz-builder-palette-add",
-          disabled: c.disabled || c.readonly,
-          onClick: e[0] || (e[0] = (t) => B("single-choice"))
-        }, {
-          default: s(() => [
-            l(o(h), { class: "h-3.5 w-3.5" }),
-            e[8] || (e[8] = n(" Add question ", -1))
-          ]),
-          _: 1
-        }, 8, ["disabled"]),
-        d("div", ge, [
-          (r(), u(k, null, z(H, (t) => d("button", {
-            key: t.type,
-            type: "button",
-            class: "flex items-center gap-2 rounded-md border bg-background px-2 py-1.5 text-left text-xs transition-colors hover:border-primary hover:bg-accent/40 disabled:opacity-50",
-            "data-testid": `quiz-builder-palette-${t.type}`,
-            disabled: c.disabled || c.readonly,
-            onClick: (p) => B(t.type)
-          }, [
-            l(o(h), { class: "h-3.5 w-3.5 shrink-0" }),
-            d("span", ye, b(t.label), 1)
-          ], 8, _e)), 64))
-        ]),
-        c.helpText ? (r(), u("p", qe, b(c.helpText), 1)) : g("", !0),
-        c.errors.length ? (r(), u("ul", ke, [
-          (r(!0), u(k, null, z(c.errors, (t, p) => (r(), u("li", { key: p }, b(t), 1))), 128))
-        ])) : g("", !0)
-      ]),
-      d("section", ze, [
-        d("header", $e, [
-          e[10] || (e[10] = d("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Quiz ", -1)),
-          l(o(O), {
-            variant: "outline",
-            class: "font-mono text-[10px]"
-          }, {
-            default: s(() => [...e[9] || (e[9] = [
-              n(" builder/quiz-builder ", -1)
-            ])]),
-            _: 1
-          })
-        ]),
-        l(o(C), { class: "border-dashed" }, {
-          default: s(() => [
-            l(o(I), { class: "flex flex-col gap-2 py-3" }, {
-              default: s(() => [
-                d("div", he, [
-                  l(o(f), { for: "qb-title" }, {
-                    default: s(() => [...e[11] || (e[11] = [
-                      n("Quiz title", -1)
-                    ])]),
-                    _: 1
-                  }),
-                  l(o(x), {
-                    id: "qb-title",
-                    "model-value": X.value,
-                    "data-testid": "quiz-builder-title",
-                    onInput: e[1] || (e[1] = (t) => o(a).updateMeta({
-                      title: t.target.value
-                    }))
-                  }, null, 8, ["model-value"])
-                ]),
-                d("div", we, [
-                  l(o(f), { for: "qb-description" }, {
-                    default: s(() => [...e[12] || (e[12] = [
-                      n("Description", -1)
-                    ])]),
-                    _: 1
-                  }),
-                  l(o(N), {
-                    id: "qb-description",
-                    "model-value": G.value,
-                    "data-testid": "quiz-builder-description",
-                    onInput: e[2] || (e[2] = (t) => o(a).updateMeta({
-                      description: t.target.value
-                    }))
-                  }, null, 8, ["model-value"])
-                ]),
-                d("div", Ce, [
-                  l(o(f), { for: "qb-passing" }, {
-                    default: s(() => [...e[13] || (e[13] = [
-                      n("Passing score", -1)
-                    ])]),
-                    _: 1
-                  }),
-                  l(o(x), {
-                    id: "qb-passing",
-                    type: "number",
-                    "model-value": J.value,
-                    "data-testid": "quiz-builder-passing-score",
-                    onInput: e[3] || (e[3] = (t) => o(a).updateMeta({
-                      passingScore: A(
-                        t.target.value
-                      )
-                    }))
-                  }, null, 8, ["model-value"])
-                ])
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        }),
-        $.value.length === 0 ? (r(), u("p", Ie, ' Click "Add question" or a chip to start the quiz. ')) : (r(), u("ul", Se, [
-          (r(!0), u(k, null, z($.value, (t, p) => (r(), u("li", {
-            key: t.id,
-            class: M([
-              "flex cursor-pointer items-center gap-2 rounded border bg-background px-2 py-1.5 transition-colors",
-              o(a).selection.value.id === t.id ? "border-primary bg-accent/30" : ""
-            ]),
-            "data-testid": `quiz-builder-row-${t.id}`,
-            onClick: (We) => W(t.id)
-          }, [
-            d("span", Qe, b(p + 1) + ". ", 1),
-            d("span", Be, [
-              d("span", Ae, b(t.prompt), 1),
-              d("span", Me, b(t.options.length) + " option(s) ", 1)
-            ]),
-            l(o(O), {
-              variant: "secondary",
-              class: "ml-auto font-mono text-[9px]"
-            }, {
-              default: s(() => [
-                n(b(t.type), 1)
-              ]),
-              _: 2
-            }, 1024)
-          ], 10, Ve))), 128))
-        ]))
-      ]),
-      d("aside", Te, [
-        d("header", je, [
-          e[14] || (e[14] = d("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Inspector ", -1)),
-          o(a).selection.value.id ? (r(), T(o(_), {
-            key: 0,
-            variant: "ghost",
-            size: "icon-sm",
-            "aria-label": "Clear selection",
-            onClick: Z
-          }, {
-            default: s(() => [
-              l(o(ne), { class: "h-3.5 w-3.5" })
-            ]),
-            _: 1
-          })) : g("", !0)
-        ]),
-        m.value ? (r(), u("div", Oe, [
-          l(o(C), { class: "border-dashed" }, {
-            default: s(() => [
-              l(o(F), { class: "py-2" }, {
-                default: s(() => [
-                  l(o(L), { class: "font-mono text-xs uppercase tracking-wide" }, {
-                    default: s(() => [...e[15] || (e[15] = [
-                      n(" question ", -1)
-                    ])]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }),
-              l(o(I), { class: "flex flex-col gap-2 pb-3" }, {
-                default: s(() => [
-                  d("div", Fe, [
-                    l(o(f), { for: "qb-prompt" }, {
-                      default: s(() => [...e[16] || (e[16] = [
-                        n("Prompt", -1)
-                      ])]),
-                      _: 1
-                    }),
-                    l(o(x), {
-                      id: "qb-prompt",
-                      "model-value": m.value.prompt,
-                      "data-testid": "quiz-builder-inspector-prompt",
-                      onInput: e[4] || (e[4] = (t) => y({
-                        prompt: t.target.value
-                      }))
-                    }, null, 8, ["model-value"])
-                  ]),
-                  d("div", Le, [
-                    l(o(f), { for: "qb-type" }, {
-                      default: s(() => [...e[17] || (e[17] = [
-                        n("Type", -1)
-                      ])]),
-                      _: 1
-                    }),
-                    l(o(re), {
-                      "model-value": m.value.type,
-                      "onUpdate:modelValue": e[5] || (e[5] = (t) => y({ type: t }))
-                    }, {
-                      default: s(() => [
-                        l(o(ce), {
-                          id: "qb-type",
-                          "data-testid": "quiz-builder-inspector-type"
-                        }, {
-                          default: s(() => [
-                            l(o(fe), { placeholder: "Question type" })
-                          ]),
-                          _: 1
-                        }),
-                        l(o(ue), null, {
-                          default: s(() => [
-                            l(o(w), { value: "single-choice" }, {
-                              default: s(() => [...e[18] || (e[18] = [
-                                n("Single choice", -1)
-                              ])]),
-                              _: 1
-                            }),
-                            l(o(w), { value: "multi-choice" }, {
-                              default: s(() => [...e[19] || (e[19] = [
-                                n("Multi choice", -1)
-                              ])]),
-                              _: 1
-                            }),
-                            l(o(w), { value: "free-text" }, {
-                              default: s(() => [...e[20] || (e[20] = [
-                                n("Free text", -1)
-                              ])]),
-                              _: 1
-                            })
-                          ]),
-                          _: 1
-                        })
-                      ]),
-                      _: 1
-                    }, 8, ["model-value"])
-                  ]),
-                  d("div", Re, [
-                    l(o(f), { for: "qb-help" }, {
-                      default: s(() => [...e[21] || (e[21] = [
-                        n("Help text", -1)
-                      ])]),
-                      _: 1
-                    }),
-                    l(o(N), {
-                      id: "qb-help",
-                      "model-value": m.value.helpText ?? "",
-                      "data-testid": "quiz-builder-inspector-help",
-                      onInput: e[6] || (e[6] = (t) => y({
-                        helpText: t.target.value
-                      }))
-                    }, null, 8, ["model-value"])
-                  ]),
-                  d("div", Ue, [
-                    l(o(f), { for: "qb-required" }, {
-                      default: s(() => [...e[22] || (e[22] = [
-                        n("Required", -1)
-                      ])]),
-                      _: 1
-                    }),
-                    l(o(R), {
-                      id: "qb-required",
-                      "model-value": !!m.value.required,
-                      "data-testid": "quiz-builder-inspector-required",
-                      "onUpdate:modelValue": e[7] || (e[7] = (t) => y({ required: t }))
-                    }, null, 8, ["model-value"])
-                  ])
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }),
-          K.value ? (r(), T(o(C), {
-            key: 0,
-            class: "border-dashed"
-          }, {
-            default: s(() => [
-              l(o(F), { class: "py-2" }, {
-                default: s(() => [
-                  l(o(L), { class: "flex items-center justify-between font-mono text-xs uppercase tracking-wide" }, {
-                    default: s(() => [
-                      e[24] || (e[24] = d("span", null, "options", -1)),
-                      l(o(_), {
-                        variant: "outline",
-                        size: "sm",
-                        "data-testid": "quiz-builder-inspector-add-option",
-                        onClick: ee
-                      }, {
-                        default: s(() => [
-                          l(o(h), { class: "h-3.5 w-3.5" }),
-                          e[23] || (e[23] = n(" Add option ", -1))
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }),
-              l(o(I), { class: "flex flex-col gap-2 pb-3" }, {
-                default: s(() => [
-                  (r(!0), u(k, null, z(m.value.options, (t) => (r(), u("div", {
-                    key: t.id,
-                    class: "flex flex-col gap-1 rounded border bg-background p-2",
-                    "data-testid": `quiz-builder-inspector-option-${t.id}`
-                  }, [
-                    d("div", Pe, [
-                      d("div", Ee, [
-                        l(o(f), {
-                          for: `qb-opt-label-${t.id}`
-                        }, {
-                          default: s(() => [...e[25] || (e[25] = [
-                            n("Label", -1)
-                          ])]),
-                          _: 1
-                        }, 8, ["for"]),
-                        l(o(x), {
-                          id: `qb-opt-label-${t.id}`,
-                          "model-value": t.label,
-                          "data-testid": `quiz-builder-inspector-option-${t.id}-label`,
-                          onInput: (p) => q(t.id, {
-                            label: p.target.value
-                          })
-                        }, null, 8, ["id", "model-value", "data-testid", "onInput"])
-                      ]),
-                      d("div", He, [
-                        l(o(f), {
-                          for: `qb-opt-value-${t.id}`
-                        }, {
-                          default: s(() => [...e[26] || (e[26] = [
-                            n("Value", -1)
-                          ])]),
-                          _: 1
-                        }, 8, ["for"]),
-                        l(o(x), {
-                          id: `qb-opt-value-${t.id}`,
-                          "model-value": String(t.value),
-                          "data-testid": `quiz-builder-inspector-option-${t.id}-value`,
-                          onInput: (p) => q(t.id, {
-                            value: p.target.value
-                          })
-                        }, null, 8, ["id", "model-value", "data-testid", "onInput"])
-                      ])
-                    ]),
-                    d("div", Xe, [
-                      d("div", Ge, [
-                        l(o(f), {
-                          for: `qb-opt-correct-${t.id}`
-                        }, {
-                          default: s(() => [...e[27] || (e[27] = [
-                            n("Correct", -1)
-                          ])]),
-                          _: 1
-                        }, 8, ["for"]),
-                        l(o(R), {
-                          id: `qb-opt-correct-${t.id}`,
-                          "model-value": !!t.correct,
-                          "data-testid": `quiz-builder-inspector-option-${t.id}-correct`,
-                          "onUpdate:modelValue": (p) => q(t.id, { correct: p })
-                        }, null, 8, ["id", "model-value", "data-testid", "onUpdate:modelValue"])
-                      ]),
-                      d("div", Je, [
-                        l(o(f), {
-                          for: `qb-opt-score-${t.id}`
-                        }, {
-                          default: s(() => [...e[28] || (e[28] = [
-                            n("Score", -1)
-                          ])]),
-                          _: 1
-                        }, 8, ["for"]),
-                        l(o(x), {
-                          id: `qb-opt-score-${t.id}`,
-                          type: "number",
-                          "model-value": t.score ?? 0,
-                          "data-testid": `quiz-builder-inspector-option-${t.id}-score`,
-                          onInput: (p) => q(t.id, {
-                            score: A(
-                              p.target.value
-                            )
-                          })
-                        }, null, 8, ["id", "model-value", "data-testid", "onInput"])
-                      ])
-                    ]),
-                    l(o(_), {
-                      variant: "ghost",
-                      size: "sm",
-                      class: "self-end text-destructive",
-                      "data-testid": `quiz-builder-inspector-option-${t.id}-remove`,
-                      onClick: (p) => te(t.id)
-                    }, {
-                      default: s(() => [
-                        l(o(j), { class: "h-3.5 w-3.5" }),
-                        e[29] || (e[29] = n(" Remove option ", -1))
-                      ]),
-                      _: 1
-                    }, 8, ["data-testid", "onClick"])
-                  ], 8, De))), 128)),
-                  m.value.options.length === 0 ? (r(), u("p", Ke, ' No options yet — click "Add option". ')) : g("", !0)
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          })) : g("", !0),
-          l(o(_), {
-            variant: "destructive",
-            size: "sm",
-            class: "self-end",
-            "data-testid": "quiz-builder-remove",
-            onClick: Y
-          }, {
-            default: s(() => [
-              l(o(j), { class: "h-3.5 w-3.5" }),
-              e[30] || (e[30] = n(" Remove question ", -1))
-            ]),
-            _: 1
-          })
-        ])) : (r(), u("p", Ne, " Select a question on the canvas to edit it. "))
-      ])
-    ], 10, be));
-  }
-});
-export {
-  $t as default
-};
-//# sourceMappingURL=QuizBuilder.vue.js.map