@erudit-js/prose 4.0.0-dev.4 → 4.0.0

package/dist/elements/problem/components/expanders/Check.vue

@@ -1,150 +1,153 @@
-<script lang="ts" setup>
-import { useTemplateRef, ref, watch } from 'vue';
-import type { ProseElement } from '@jsprose/core';
-
-import { checkValue, type problemCheckSchema } from '../../problemContent.js';
-import checkIcon from '../../assets/actions/check.svg?raw';
-import plusIcon from '../../../../app/shared/assets/plus.svg?raw';
-import successIcon from '../../../../app/shared/assets/check.svg?raw';
-import { useFormatText } from '../../../../app/composables/formatText.js';
-import { useProseContext } from '../../../../app/index.js';
-import { useProblemPhrase } from '../../composables/phrase.js';
-
-type CheckStatus = 'default' | 'correct' | 'wrong';
-type CheckState = {
-    icon: string;
-    iconClass?: string;
-    labelClass: string;
-    inputClass: string;
-    buttonClass: string;
-};
-
-const { check, script } = defineProps<{
-    check: ProseElement<typeof problemCheckSchema>;
-    script?: {
-        check: (answer: string | undefined) => boolean;
-        clear: () => void;
-    };
-}>();
-
-const states: Record<CheckStatus, CheckState> = {
-    default: {
-        icon: checkIcon,
-        labelClass: 'text-text-muted',
-        inputClass: 'border-border text-text',
-        buttonClass:
-            'text-text-muted border-border hocus:border-text-muted hocus:text-text',
-    },
-    correct: {
-        icon: successIcon,
-        labelClass: 'text-lime-600',
-        inputClass: 'text-lime-600 border-lime-500',
-        buttonClass: 'text-lime-600 border-lime-500',
-    },
-    wrong: {
-        icon: plusIcon,
-        iconClass: 'rotate-45',
-        labelClass: 'text-red-700 dark:text-red-400',
-        inputClass: 'text-red-700 dark:text-red-400 border-red-400',
-        buttonClass: 'text-red-700 dark:text-red-400 border-red-400',
-    },
-};
-
-const state = ref<CheckStatus>('default');
-
-const formatText = useFormatText();
-const { EruditIcon, EruditTransition } = useProseContext();
-const phrase = await useProblemPhrase();
-
-const answerInputElement = useTemplateRef('answer');
-const answerInput = ref<string>('');
-const lastCheckedInput = ref<string | undefined | null>(null);
-
-watch(answerInput, () => {
-    state.value = 'default';
-    lastCheckedInput.value = null;
-    script?.clear();
-});
-
-function doCheck() {
-    let newInput = answerInput.value.trim().replace(/\s+/g, ' ') || undefined;
-
-    if (newInput === lastCheckedInput.value) {
-        return;
-    }
-
-    lastCheckedInput.value = newInput;
-
-    if (script) {
-        const isCorrect = script.check(newInput);
-        state.value = isCorrect ? 'correct' : 'wrong';
-        return;
-    }
-
-    state.value = checkValue(newInput, check.data) ? 'correct' : 'wrong';
-}
-</script>
-
-<template>
-    <div class="gap-small flex w-full flex-col">
-        <div
-            :class="[
-                'text-main-sm font-medium transition-[color]',
-                states[state].labelClass,
-            ]"
-        >
-            <span @click="answerInputElement?.focus()">
-                {{ formatText(check.data.label ?? phrase.action_answer) + ':' }}
-            </span>
-        </div>
-        <form class="flex" @submit.prevent="doCheck">
-            <input
-                ref="answer"
-                type="text"
-                name="answer"
-                v-model="answerInput"
-                :placeholder="check.data.placeholder"
-                autocomplete="off"
-                :class="[
-                    `bg-bg-main text-main-sm relative z-10 min-w-0 flex-1
-                    rounded rounded-tr-none rounded-br-none border border-r-0
-                    px-2.5 py-1 transition-[border,color,background]`,
-                    states[state].inputClass,
-                ]"
-            />
-            <button
-                type="submit"
-                :class="[
-                    `bg-bg-main relative w-[50px] cursor-pointer rounded
-                    rounded-tl-none rounded-bl-none border outline-0
-                    transition-[border,color,background]`,
-                    states[state].buttonClass,
-                ]"
-            >
-                <EruditIcon
-                    :key="state"
-                    :name="states[state].icon"
-                    :class="[
-                        'invisible m-auto text-[1.2em]',
-                        states[state].iconClass,
-                    ]"
-                />
-                <EruditTransition>
-                    <EruditIcon
-                        :key="state"
-                        :name="states[state].icon"
-                        :class="[
-                            `absolute top-1/2 left-1/2 -translate-1/2
-                            text-[1.2em]`,
-                            states[state].iconClass,
-                        ]"
-                    />
-                </EruditTransition>
-            </button>
-        </form>
-
-        <div class="text-text-dimmed text-main-xs italic">
-            {{ check.data.hint ? formatText(check.data.hint) : '' }}
-        </div>
-    </div>
-</template>
+<script setup lang="ts">
+import { useTemplateRef, ref, watch } from 'vue';
+import type { ProseElement } from '@jsprose/core';
+
+import { checkValue, type problemCheckSchema } from '../../problemContent.js';
+import checkIcon from '../../assets/actions/check.svg?raw';
+import plusIcon from '../../../../app/shared/assets/plus.svg?raw';
+import successIcon from '../../../../app/shared/assets/check.svg?raw';
+import { useFormatText } from '../../../../app/composables/formatText.js';
+import { useProseContext } from '../../../../app/index.js';
+import { useProblemPhrase } from '../../composables/phrase.js';
+
+type CheckStatus = 'default' | 'correct' | 'wrong';
+
+type CheckState = {
+  icon: string;
+  iconClass?: string;
+  labelClass: string;
+  inputClass: string;
+  buttonClass: string;
+};
+
+const { check, script } = defineProps<{
+  check: ProseElement<typeof problemCheckSchema>;
+  script?: {
+    check: (answer: string | undefined) => boolean;
+    clear: () => void;
+  };
+}>();
+
+const emit = defineEmits<{
+  (event: 'status-change', status: CheckStatus): void;
+}>();
+
+const states: Record<CheckStatus, CheckState> = {
+  default: {
+    icon: checkIcon,
+    labelClass: 'text-text-muted',
+    inputClass: 'border-border text-text',
+    buttonClass:
+      'text-text-muted border-border hocus:border-text-muted hocus:text-text',
+  },
+  correct: {
+    icon: successIcon,
+    labelClass: 'text-lime-600',
+    inputClass: 'text-lime-600 border-lime-500',
+    buttonClass: 'text-lime-600 border-lime-500',
+  },
+  wrong: {
+    icon: plusIcon,
+    iconClass: 'rotate-45',
+    labelClass: 'text-red-700 dark:text-red-400',
+    inputClass: 'text-red-700 dark:text-red-400 border-red-400',
+    buttonClass: 'text-red-700 dark:text-red-400 border-red-400',
+  },
+};
+
+const state = ref<CheckStatus>('default');
+
+const formatText = useFormatText();
+const { EruditIcon, EruditTransition } = useProseContext();
+const phrase = await useProblemPhrase();
+
+const answerInputElement = useTemplateRef<HTMLInputElement>('answer');
+const answerInput = ref('');
+const lastCheckedInput = ref<string | undefined | null>(null);
+
+watch(answerInput, () => {
+  state.value = 'default';
+  lastCheckedInput.value = null;
+  script?.clear();
+  emit('status-change', 'default');
+});
+
+function doCheck() {
+  const newInput = answerInput.value.trim().replace(/\s+/g, ' ') || undefined;
+
+  if (newInput === lastCheckedInput.value) return;
+
+  lastCheckedInput.value = newInput;
+
+  if (script) {
+    const ok = script.check(newInput);
+    state.value = ok ? 'correct' : 'wrong';
+    emit('status-change', state.value);
+    return;
+  }
+
+  state.value = checkValue(newInput, check.data) ? 'correct' : 'wrong';
+
+  emit('status-change', state.value);
+}
+</script>
+
+<template>
+  <div class="gap-small flex w-full flex-col">
+    <div
+      :class="[
+        'text-main-sm font-medium transition-[color]',
+        states[state].labelClass,
+      ]"
+    >
+      <span @click="answerInputElement?.focus()">
+        {{ formatText(check.data.label ?? phrase.action_answer) + ':' }}
+      </span>
+    </div>
+
+    <form class="flex" @submit.prevent="doCheck">
+      <input
+        ref="answer"
+        v-model="answerInput"
+        type="text"
+        autocomplete="off"
+        :placeholder="check.data.placeholder"
+        :class="[
+          `bg-bg-main text-main-sm relative z-10 min-w-0 flex-1 rounded
+          rounded-tr-none rounded-br-none border border-r-0 px-2.5 py-1
+          transition-[border,color,background]`,
+          states[state].inputClass,
+        ]"
+      />
+
+      <button
+        type="submit"
+        :class="[
+          `bg-bg-main relative w-[50px] cursor-pointer rounded rounded-tl-none
+          rounded-bl-none border outline-0 transition-[border,color,background]`,
+          states[state].buttonClass,
+        ]"
+      >
+        <EruditIcon
+          :key="state"
+          :name="states[state].icon"
+          :class="['invisible m-auto text-[1.2em]', states[state].iconClass]"
+        />
+        <EruditTransition>
+          <EruditIcon
+            :key="state"
+            :name="states[state].icon"
+            :class="[
+              'absolute top-1/2 left-1/2 -translate-1/2 text-[1.2em]',
+              states[state].iconClass,
+            ]"
+          />
+        </EruditTransition>
+      </button>
+    </form>
+
+    <div class="text-text-dimmed text-main-xs italic">
+      {{ check.data.hint ? formatText(check.data.hint) : '' }}
+    </div>
+  </div>
+</template>

package/dist/elements/problem/components/expanders/Checks.vue

@@ -1,83 +1,146 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import type { ProseElement } from '@jsprose/core';
-
-import type {
-    CheckFunction,
-    problemCheckSchema,
-} from '../../problemContent.js';
-import ProblemExpander from '../ProblemExpander.vue';
-import Check from './Check.vue';
-
-const { value } = defineProps<{
-    value: {
-        checkElements: ProseElement<typeof problemCheckSchema>[];
-        checkFunction?: CheckFunction;
-    };
-}>();
-
-const scriptCheckFunction = (answer: string | undefined, name: string) => {
-    if (!value.checkFunction) {
-        console.warn('No check function defined for script checks!');
-        return false;
-    }
-
-    const checkResult = value.checkFunction({
-        answer,
-        name,
-        answers: scriptAnswers.value,
-    });
-
-    if (checkResult === true) {
-        scriptAnswers.value[name] = answer;
-    } else {
-        delete scriptAnswers.value[name];
-    }
-
-    return checkResult;
-};
-
-const scriptClearFunction = (name: string) => {
-    delete scriptAnswers.value[name];
-};
-
-const scriptCheckNameMap = new Map<
-    ProseElement<typeof problemCheckSchema>,
-    string
->();
-for (const checkElement of value.checkElements) {
-    if (checkElement.data.script) {
-        scriptCheckNameMap.set(checkElement, checkElement.data.script);
-    }
-}
-
-const scriptAnswers = ref<Record<string, string | undefined>>({});
-</script>
-
-<template>
-    <ProblemExpander>
-        <div
-            class="micro:grid-cols-2 grid gap-(--proseAsideWidth)
-                p-(--proseAsideWidth)"
-        >
-            <Check
-                v-for="check of value.checkElements"
-                :check
-                :script="
-                    check.data.script
-                        ? {
-                              check: (answer: string | undefined) => {
-                                  const name = scriptCheckNameMap.get(check)!;
-                                  return scriptCheckFunction(answer, name);
-                              },
-                              clear: () => {
-                                  const name = scriptCheckNameMap.get(check)!;
-                                  scriptClearFunction(name);
-                              },
-                          }
-                        : undefined
-                "
-            />
-        </div>
-    </ProblemExpander>
-</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { isProseElement, type ProseElement } from '@jsprose/core';
+
+import type { CheckFunction } from '../../problemContent.js';
+import { problemCheckSchema } from '../../problemContent.js';
+import ProblemExpander from '../ProblemExpander.vue';
+import Check from './Check.vue';
+
+type CheckProseElement = ProseElement<typeof problemCheckSchema>;
+type CheckStatus = 'default' | 'correct' | 'wrong';
+
+const { value } = defineProps<{
+  value: {
+    checkElements: CheckProseElement[];
+    checkFunction?: CheckFunction;
+  };
+}>();
+
+let checkIdCounter = 0;
+const checkIdMap = new WeakMap<CheckProseElement, string>();
+
+function getCheckId(check: CheckProseElement) {
+  if (!checkIdMap.has(check)) {
+    checkIdMap.set(check, `check-${++checkIdCounter}`);
+  }
+  return checkIdMap.get(check)!;
+}
+
+function collectAllChecks(
+  checks: CheckProseElement[],
+  parent?: CheckProseElement,
+): CheckProseElement[] {
+  const result: CheckProseElement[] = [];
+
+  for (const check of checks) {
+    // attach parent reference if not present
+    (check as any)._parent = parent ?? null;
+    result.push(check);
+
+    const children = (check.children ?? []).filter((child) =>
+      isProseElement(child, problemCheckSchema),
+    ) as CheckProseElement[];
+
+    if (children.length) {
+      result.push(...collectAllChecks(children, check));
+    }
+  }
+
+  return result;
+}
+
+const allChecks = computed(() => collectAllChecks(value.checkElements));
+
+const checkStatus = ref<Record<string, CheckStatus>>({});
+
+function setStatus(check: CheckProseElement, status: CheckStatus) {
+  checkStatus.value[getCheckId(check)] = status;
+}
+
+function isVisible(check: CheckProseElement) {
+  const parent = (check as any)._parent as CheckProseElement | null;
+
+  if (!parent) return true;
+
+  // Check all ancestors in the parent tree
+  let current: CheckProseElement | null = parent;
+  while (current) {
+    const status = checkStatus.value[getCheckId(current)];
+    if (status !== 'correct') {
+      return false;
+    }
+    current = (current as any)._parent as CheckProseElement | null;
+  }
+
+  return true;
+}
+
+const scriptAnswers = ref<Record<string, string | undefined>>({});
+
+const scriptCheckNameMap = computed(() => {
+  const map = new Map<CheckProseElement, string>();
+  for (const check of allChecks.value) {
+    if (check.data.script) {
+      map.set(check, check.data.script);
+    }
+  }
+  return map;
+});
+
+function scriptCheckFunction(
+  check: CheckProseElement,
+  answer: string | undefined,
+) {
+  if (!value.checkFunction) {
+    console.warn('No check function defined for script checks!');
+    return false;
+  }
+
+  const name = scriptCheckNameMap.value.get(check)!;
+
+  const result = value.checkFunction({
+    name,
+    answer,
+    answers: scriptAnswers.value,
+  });
+
+  if (result === true) {
+    scriptAnswers.value[name] = answer;
+  } else {
+    delete scriptAnswers.value[name];
+  }
+
+  return result;
+}
+
+function scriptClearFunction(check: CheckProseElement) {
+  const name = scriptCheckNameMap.value.get(check);
+  if (name) delete scriptAnswers.value[name];
+}
+</script>
+
+<template>
+  <ProblemExpander>
+    <div
+      class="micro:grid-cols-2 grid gap-(--proseAsideWidth)
+        p-(--proseAsideWidth)"
+    >
+      <Check
+        v-for="check in allChecks"
+        :key="getCheckId(check)"
+        :check="check"
+        v-show="isVisible(check)"
+        :script="
+          check.data.script
+            ? {
+                check: (answer) => scriptCheckFunction(check, answer),
+                clear: () => scriptClearFunction(check),
+              }
+            : undefined
+        "
+        @status-change="(status) => setStatus(check, status)"
+      />
+    </div>
+  </ProblemExpander>
+</template>

package/dist/elements/problem/components/expanders/DefaultPlusSections.vue

@@ -1,38 +1,38 @@
-<script lang="ts" setup>
-import { watchEffect } from 'vue';
-import {
-    isProseElement,
-    type AnySchema,
-    type ProseElement,
-} from '@jsprose/core';
-
-import { problemSectionSchema } from '../../problemContent.js';
-import { useArrayContainsAnchor } from '../../../../app/composables/anchor.js';
-import ProblemExpander from '../ProblemExpander.vue';
-import ProblemExpanderSection from '../ProblemExpanderSection.vue';
-import Render from '../../../../app/shared/Render.vue';
-
-const { value } = defineProps<{ value: ProseElement<AnySchema> }>();
-
-const defaultBlocks = value.children!.filter(
-    (element) => !isProseElement(element, problemSectionSchema),
-);
-
-const sections = value.children!.filter((element) =>
-    isProseElement(element, problemSectionSchema),
-) as ProseElement<typeof problemSectionSchema>[];
-</script>
-
-<template>
-    <ProblemExpander>
-        <div v-if="defaultBlocks.length" class="py-(--proseAsideWidth)">
-            <Render v-for="child of defaultBlocks" :element="child" />
-        </div>
-        <ProblemExpanderSection
-            v-if="sections.length"
-            v-for="section of sections"
-            :title="section.data"
-            :element="section"
-        />
-    </ProblemExpander>
-</template>
+<script lang="ts" setup>
+import { watchEffect } from 'vue';
+import {
+  isProseElement,
+  type AnySchema,
+  type ProseElement,
+} from '@jsprose/core';
+
+import { problemSectionSchema } from '../../problemContent.js';
+import { useArrayContainsAnchor } from '../../../../app/composables/anchor.js';
+import ProblemExpander from '../ProblemExpander.vue';
+import ProblemExpanderSection from '../ProblemExpanderSection.vue';
+import Render from '../../../../app/shared/Render.vue';
+
+const { value } = defineProps<{ value: ProseElement<AnySchema> }>();
+
+const defaultBlocks = value.children!.filter(
+  (element) => !isProseElement(element, problemSectionSchema),
+);
+
+const sections = value.children!.filter((element) =>
+  isProseElement(element, problemSectionSchema),
+) as ProseElement<typeof problemSectionSchema>[];
+</script>
+
+<template>
+  <ProblemExpander>
+    <div v-if="defaultBlocks.length" class="py-(--proseAsideWidth)">
+      <Render v-for="child of defaultBlocks" :element="child" />
+    </div>
+    <ProblemExpanderSection
+      v-if="sections.length"
+      v-for="section of sections"
+      :title="section.data"
+      :element="section"
+    />
+  </ProblemExpander>
+</template>