@erudit-js/prose 4.0.1 → 4.1.1

package/dist/elements/problem/components/ProblemButtonGenerate.vue

@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+import { ref, useTemplateRef } from 'vue';
+import { autoUpdate } from '@floating-ui/vue';
+
+import generateIcon from '../assets/actions/generate.svg?raw';
+import plusIcon from '../../../app/shared/assets/plus.svg?raw';
+import { useProseContext } from '../../../app/composables/context.js';
+import { useProblemPhrase } from '../composables/phrase.js';
+import { DEFAULT_SEED, type ProblemSeed } from '../rng.js';
+import ProblemButton from './ProblemButton.vue';
+
+const emits = defineEmits<{ (e: 'generate', seed: ProblemSeed): void }>();
+
+const { EruditTransition, EruditIcon, usePopup } = useProseContext();
+
+const seed = ref<ProblemSeed>(DEFAULT_SEED);
+const cogRotation = ref(0);
+const usingCustomSeed = ref(false);
+
+function generate() {
+  cogRotation.value += 180;
+
+  if (usingCustomSeed.value) {
+    usingCustomSeed.value = false;
+  } else {
+    seed.value = Math.floor(Math.random() * 1000000) + 1;
+  }
+
+  emits('generate', seed.value);
+}
+
+const phrase = await useProblemPhrase();
+
+const containerElement = useTemplateRef('container');
+const toggleElement = useTemplateRef('toggle');
+const popupElement = useTemplateRef('popup');
+const { popupVisible, popupStyles } = usePopup(
+  containerElement,
+  toggleElement,
+  popupElement,
+  {
+    whileElementsMounted: autoUpdate,
+    placement: 'top',
+  },
+);
+</script>
+
+<template>
+  <div ref="container">
+    <div ref="toggle" class="select-none">
+      <ProblemButton @click="generate" class="flex items-center gap-[7px]">
+        <EruditIcon
+          :name="generateIcon"
+          :style="{ transform: `rotate(${cogRotation}deg)` }"
+          class="text-[1.3em] transition-[transform] backface-hidden"
+        />
+        <span>{{ phrase.action_generate }}</span>
+      </ProblemButton>
+    </div>
+    <EruditTransition>
+      <div v-if="popupVisible" ref="popup" :style="popupStyles" class="pb-2.5">
+        <form
+          class="shadow-border text-main-xs flex rounded bg-neutral-900
+            text-white shadow-lg dark:bg-neutral-200 dark:text-black"
+          @submit.prevent="generate"
+        >
+          <input
+            type="text"
+            v-model="seed"
+            @input="usingCustomSeed = true"
+            :title="phrase.seed_explain"
+            @focus="($event as any).target.select()"
+            class="max-w-[100px] flex-1 p-[5px] text-center outline-none"
+          />
+          <button
+            v-if="seed !== DEFAULT_SEED"
+            type="button"
+            @click="
+              seed = DEFAULT_SEED;
+              usingCustomSeed = true;
+              generate();
+            "
+            class="cursor-pointer pr-[3px]"
+          >
+            <EruditIcon
+              :name="plusIcon"
+              class="hocus:text-white dark:hocus:text-black rotate-45
+                text-[1.3em] text-neutral-400 transition-[color]
+                dark:text-neutral-600"
+            />
+          </button>
+        </form>
+      </div>
+    </EruditTransition>
+  </div>
+</template>

package/dist/elements/problem/components/ProblemContent.vue

@@ -4,11 +4,9 @@ import {
   onMounted,
   ref,
   shallowRef,
-  useTemplateRef,
   watchEffect,
   type Component,
 } from 'vue';
-import { autoUpdate, offset, useFloating } from '@floating-ui/vue';
 import {
   isProseElement,
   resolveRawElement,
@@ -17,14 +15,14 @@ import {
 
 import {
   problemAnswer,
-  problemCheckSchema,
   problemDescriptionSchema,
   problemHintSchema,
   problemNote,
   problemSolution,
-  type CheckFunction,
   type ProblemContentChild,
 } from '../problemContent.js';
+import { problemCheckSchema } from '../problemCheck.js';
+import type { CheckFunction } from '../problemScript.js';
 import { useProseContext } from '../../../app/composables/context.js';
 import { useProblemPhrase } from '../composables/phrase.js';
 import type { ProblemAction } from '../shared.js';
@@ -36,12 +34,12 @@ import { useElementStorage } from '../../../app/composables/storage.js';
 import type { ProblemScriptStorage } from '../storage.js';
 import { createProblemScriptInstance } from '../composables/problemScript.js';
 import { DEFAULT_SEED, type ProblemSeed } from '../rng.js';
-import plusIcon from '../../../app/shared/assets/plus.svg?raw';
 import Render from '../../../app/shared/Render.vue';
 import Hint from './expanders/Hint.vue';
 import DefaultPlusSections from './expanders/DefaultPlusSections.vue';
 import ProblemButton from './ProblemButton.vue';
 import Checks from './expanders/Checks.vue';
+import ProblemButtonGenerate from './ProblemButtonGenerate.vue';
 
 const { element, initialElements } = defineProps<{
   element:
@@ -50,7 +48,7 @@ const { element, initialElements } = defineProps<{
   initialElements: ProseElement<ProblemContentChild>[];
 }>();
 
-const { EruditIcon, EruditTransition } = useProseContext();
+const { EruditIcon } = useProseContext();
 const phrase = await useProblemPhrase();
 
 const actionIcons: Record<ProblemAction, string> = Object.fromEntries(
@@ -194,31 +192,15 @@ onMounted(async () => {
   }
 });
 
-const generateRotation = ref(0);
-const generating = ref(false);
-const seed = ref<ProblemSeed>(DEFAULT_SEED);
-const usingCustomSeed = ref(false);
-
-async function doGenerate() {
+let currentSeed: ProblemSeed = DEFAULT_SEED;
+async function doGenerate(seed: ProblemSeed) {
   if (!scriptInstance.value) {
     return;
   }
 
-  generateRotation.value += 180;
+  currentSeed = seed;
 
-  if (generating.value) {
-    return;
-  }
-
-  generating.value = true;
-
-  if (usingCustomSeed.value) {
-    usingCustomSeed.value = false;
-  } else {
-    seed.value = Math.floor(Math.random() * 1000000000) + 1;
-  }
-
-  const generateResult = scriptInstance.value.generate(seed.value);
+  const generateResult = scriptInstance.value.generate(seed);
 
   if (generateResult.check) {
     scriptCheck.value = generateResult.check;
@@ -234,28 +216,14 @@ async function doGenerate() {
     proseElements.push(resolveResult.proseElement as any);
   }
 
-  elements.value = proseElements;
+  if (currentSeed !== seed) {
+    // A new generation has been requested while we were async generating.
+    return;
+  }
 
+  elements.value = proseElements;
   key.value++;
-  generating.value = false;
 }
-
-//
-// Seed Popup
-//
-
-const seedPopupVisible = ref(false);
-const seedReferenceElement = useTemplateRef('seedReference');
-const seedPopupElement = useTemplateRef('seedPopup');
-
-const { floatingStyles: seedFloatingStyles } = useFloating(
-  seedReferenceElement,
-  seedPopupElement,
-  {
-    whileElementsMounted: autoUpdate,
-    placement: 'top',
-  },
-);
 </script>
 
 <template>
@@ -283,65 +251,7 @@ const { floatingStyles: seedFloatingStyles } = useFloating(
         <EruditIcon :name="actionIcons[actionKey]" class="text-[1.3em]" />
         <span>{{ phrase[`action_${actionKey}`] }}</span>
       </ProblemButton>
-      <div
-        v-if="isGenerator"
-        ref="seedReference"
-        @mouseenter="seedPopupVisible = true"
-        @mouseleave="seedPopupVisible = false"
-      >
-        <ProblemButton
-          @touchstart="seedPopupVisible = seedPopupVisible ? false : true"
-          @click="doGenerate"
-          class="flex items-center gap-[7px]"
-        >
-          <EruditIcon
-            :name="actionIcons.generate"
-            :style="{ transform: `rotate(${generateRotation}deg)` }"
-            class="text-[1.3em] transition-[transform] backface-hidden"
-          />
-          <span>{{ phrase.action_generate }}</span>
-        </ProblemButton>
-        <EruditTransition>
-          <div
-            v-if="seedPopupVisible"
-            ref="seedPopup"
-            :style="seedFloatingStyles"
-            class="pb-2.5"
-          >
-            <form
-              class="shadow-border text-main-xs flex rounded bg-neutral-900
-                text-white shadow-lg dark:bg-neutral-200 dark:text-black"
-              @submit.prevent="doGenerate"
-            >
-              <input
-                type="text"
-                v-model="seed"
-                @input="usingCustomSeed = true"
-                :title="phrase.seed_explain"
-                @focus="($event as any).target.select()"
-                class="max-w-[100px] flex-1 p-[5px] text-center outline-none"
-              />
-              <button
-                v-if="seed !== DEFAULT_SEED"
-                type="button"
-                @click="
-                  seed = DEFAULT_SEED;
-                  usingCustomSeed = true;
-                  doGenerate();
-                "
-                class="cursor-pointer pr-[3px]"
-              >
-                <EruditIcon
-                  :name="plusIcon"
-                  class="hocus:text-white dark:hocus:text-black rotate-45
-                    text-[1.3em] text-neutral-400 transition-[color]
-                    dark:text-neutral-600"
-                />
-              </button>
-            </form>
-          </div>
-        </EruditTransition>
-      </div>
+      <ProblemButtonGenerate v-if="isGenerator" @generate="doGenerate" />
     </div>
 
     <Suspense suspensible>

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

@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import { useTemplateRef, ref, watch } from 'vue';
+import { useTemplateRef, ref, watch, computed } from 'vue';
 import type { ProseElement } from '@jsprose/core';
 
-import { checkValue, type problemCheckSchema } from '../../problemContent.js';
+import {
+  checkProblemAnswer,
+  fromSerializableValidator,
+  type problemCheckSchema,
+} from '../../problemCheck.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';
@@ -28,6 +32,10 @@ const { check, script } = defineProps<{
   };
 }>();
 
+const validator = computed(() => {
+  return fromSerializableValidator(check.data.serializedValidator);
+});
+
 const emit = defineEmits<{
   (event: 'status-change', status: CheckStatus): void;
 }>();
@@ -61,6 +69,35 @@ const formatText = useFormatText();
 const { EruditIcon, EruditTransition } = useProseContext();
 const phrase = await useProblemPhrase();
 
+const hint = computed(() => {
+  if (check.data.hint) {
+    return check.data.hint;
+  }
+
+  if (check.data.serializedValidator.type === 'boolean') {
+    return phrase.boolean_check_hint;
+  }
+
+  if (check.data.serializedValidator.type === 'array') {
+    return phrase.array_check_hint(
+      check.data.serializedValidator.ordered,
+      check.data.serializedValidator.separator,
+    );
+  }
+});
+
+const labelText = computed(() => {
+  const rawLabel = formatText(check.data.label ?? phrase.action_answer);
+  const trimmed = rawLabel.trimEnd();
+
+  if (!trimmed) {
+    return '';
+  }
+
+  const endsWithAlphaNum = /[\p{L}\p{N}]$/u.test(trimmed);
+  return endsWithAlphaNum ? `${trimmed}:` : trimmed;
+});
+
 const answerInputElement = useTemplateRef<HTMLInputElement>('answer');
 const answerInput = ref('');
 const lastCheckedInput = ref<string | undefined | null>(null);
@@ -73,20 +110,29 @@ watch(answerInput, () => {
 });
 
 function doCheck() {
-  const newInput = answerInput.value.trim().replace(/\s+/g, ' ') || undefined;
+  const newInput = answerInput.value.replace(/\s+/g, ' ').trim();
 
-  if (newInput === lastCheckedInput.value) return;
+  if (newInput === lastCheckedInput.value) {
+    return;
+  }
 
   lastCheckedInput.value = newInput;
 
   if (script) {
-    const ok = script.check(newInput);
+    const ok = script.check(newInput || undefined);
     state.value = ok ? 'correct' : 'wrong';
     emit('status-change', state.value);
     return;
   }
 
-  state.value = checkValue(newInput, check.data) ? 'correct' : 'wrong';
+  state.value = checkProblemAnswer(
+    newInput,
+    phrase.yes_regexp,
+    phrase.no_regexp,
+    validator.value,
+  )
+    ? 'correct'
+    : 'wrong';
 
   emit('status-change', state.value);
 }
@@ -101,7 +147,7 @@ function doCheck() {
       ]"
     >
       <span @click="answerInputElement?.focus()">
-        {{ formatText(check.data.label ?? phrase.action_answer) + ':' }}
+        {{ labelText }}
       </span>
     </div>
 
@@ -113,9 +159,10 @@ function doCheck() {
         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]`,
+          `bg-bg-main text-main-sm focus:ring-brand relative z-10 min-w-0 flex-1
+          rounded rounded-tr-none rounded-br-none border border-r-0 px-2.5 py-1
+          ring-2 ring-transparent outline-0
+          transition-[border,color,background,box-shadow]`,
           states[state].inputClass,
         ]"
       />
@@ -147,7 +194,7 @@ function doCheck() {
     </form>
 
     <div class="text-text-dimmed text-main-xs italic">
-      {{ check.data.hint ? formatText(check.data.hint) : '' }}
+      {{ hint ? formatText(hint) : '' }}
     </div>
   </div>
 </template>

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

@@ -2,8 +2,8 @@
 import { computed, ref } from 'vue';
 import { isProseElement, type ProseElement } from '@jsprose/core';
 
-import type { CheckFunction } from '../../problemContent.js';
-import { problemCheckSchema } from '../../problemContent.js';
+import type { CheckFunction } from '../../problemScript.js';
+import { problemCheckSchema } from '../../problemCheck.js';
 import ProblemExpander from '../ProblemExpander.vue';
 import Check from './Check.vue';
 
@@ -81,8 +81,8 @@ 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);
+    if (check.data.serializedValidator.type === 'script') {
+      map.set(check, check.data.serializedValidator.name);
     }
   }
   return map;
@@ -132,7 +132,7 @@ function scriptClearFunction(check: CheckProseElement) {
         :check="check"
         v-show="isVisible(check)"
         :script="
-          check.data.script
+          check.data.serializedValidator.type === 'script'
             ? {
                 check: (answer) => scriptCheckFunction(check, answer),
                 clear: () => scriptClearFunction(check),

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

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { watchEffect } from 'vue';
 import {
   isProseElement,
   type AnySchema,
@@ -7,7 +6,6 @@ import {
 } 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';

package/dist/elements/problem/core.d.ts

@@ -93,68 +93,95 @@ declare const _default: [{
         name: "problemCheck";
         type: "block";
         linkable: false;
-        Data: import("./problemContent.js").ProblemCheckData;
+        Data: import("./problemCheck.js").ProblemCheckData;
         Storage: undefined;
-        Children: import("@jsprose/core").BlockSchema[];
+        Children: import("./problemCheck.js").ProblemCheckSchema[] | undefined;
     }, {
         ProblemCheck: import("@jsprose/core").Tag<"ProblemCheck", {
             name: "problemCheck";
             type: "block";
             linkable: false;
-            Data: import("./problemContent.js").ProblemCheckData;
+            Data: import("./problemCheck.js").ProblemCheckData;
             Storage: undefined;
-            Children: import("@jsprose/core").BlockSchema[];
+            Children: import("./problemCheck.js").ProblemCheckSchema[] | undefined;
         }, ({
             label?: string;
             hint?: string;
             placeholder?: string;
         } & (((Pick<{
-            answer: string | number | RegExp | undefined;
-            answers: (string | number | RegExp | undefined)[];
-            set: ((string | number | RegExp | undefined) | (string | number | RegExp | undefined)[])[] | {
-                separator: string;
-                values: ((string | number | RegExp | undefined) | (string | number | RegExp | undefined)[])[];
+            yes: true;
+            no: true;
+            answer: import("./problemCheck.js").ProblemCheckValue;
+            answers: (import("./problemCheck.js").ProblemCheckValueDefined | import("./problemCheck.js").ProblemCheckValueDefined[])[] | {
+                ordered?: boolean;
+                separator?: string;
+                values: (import("./problemCheck.js").ProblemCheckValueDefined | import("./problemCheck.js").ProblemCheckValueDefined[])[];
             };
             script: string;
         }, "answer"> & {
-            set?: undefined;
+            yes?: undefined;
+            no?: undefined;
             answers?: undefined;
             script?: undefined;
         }) | (Pick<{
-            answer: string | number | RegExp | undefined;
-            answers: (string | number | RegExp | undefined)[];
-            set: ((string | number | RegExp | undefined) | (string | number | RegExp | undefined)[])[] | {
-                separator: string;
-                values: ((string | number | RegExp | undefined) | (string | number | RegExp | undefined)[])[];
+            yes: true;
+            no: true;
+            answer: import("./problemCheck.js").ProblemCheckValue;
+            answers: (import("./problemCheck.js").ProblemCheckValueDefined | import("./problemCheck.js").ProblemCheckValueDefined[])[] | {
+                ordered?: boolean;
+                separator?: string;
+                values: (import("./problemCheck.js").ProblemCheckValueDefined | import("./problemCheck.js").ProblemCheckValueDefined[])[];
             };
             script: string;
-        }, "set"> & {
+        }, "yes"> & {
             answer?: undefined;
+            no?: undefined;
             answers?: undefined;
             script?: undefined;
         }) | (Pick<{
-            answer: string | number | RegExp | undefined;
-            answers: (string | number | RegExp | undefined)[];
-            set: ((string | number | RegExp | undefined) | (string | number | RegExp | undefined)[])[] | {
-                separator: string;
-                values: ((string | number | RegExp | undefined) | (string | number | RegExp | undefined)[])[];
+            yes: true;
+            no: true;
+            answer: import("./problemCheck.js").ProblemCheckValue;
+            answers: (import("./problemCheck.js").ProblemCheckValueDefined | import("./problemCheck.js").ProblemCheckValueDefined[])[] | {
+                ordered?: boolean;
+                separator?: string;
+                values: (import("./problemCheck.js").ProblemCheckValueDefined | import("./problemCheck.js").ProblemCheckValueDefined[])[];
+            };
+            script: string;
+        }, "no"> & {
+            answer?: undefined;
+            yes?: undefined;
+            answers?: undefined;
+            script?: undefined;
+        }) | (Pick<{
+            yes: true;
+            no: true;
+            answer: import("./problemCheck.js").ProblemCheckValue;
+            answers: (import("./problemCheck.js").ProblemCheckValueDefined | import("./problemCheck.js").ProblemCheckValueDefined[])[] | {
+                ordered?: boolean;
+                separator?: string;
+                values: (import("./problemCheck.js").ProblemCheckValueDefined | import("./problemCheck.js").ProblemCheckValueDefined[])[];
             };
             script: string;
         }, "answers"> & {
             answer?: undefined;
-            set?: undefined;
+            yes?: undefined;
+            no?: undefined;
             script?: undefined;
         }) | (Pick<{
-            answer: string | number | RegExp | undefined;
-            answers: (string | number | RegExp | undefined)[];
-            set: ((string | number | RegExp | undefined) | (string | number | RegExp | undefined)[])[] | {
-                separator: string;
-                values: ((string | number | RegExp | undefined) | (string | number | RegExp | undefined)[])[];
+            yes: true;
+            no: true;
+            answer: import("./problemCheck.js").ProblemCheckValue;
+            answers: (import("./problemCheck.js").ProblemCheckValueDefined | import("./problemCheck.js").ProblemCheckValueDefined[])[] | {
+                ordered?: boolean;
+                separator?: string;
+                values: (import("./problemCheck.js").ProblemCheckValueDefined | import("./problemCheck.js").ProblemCheckValueDefined[])[];
             };
             script: string;
         }, "script"> & {
             answer?: undefined;
-            set?: undefined;
+            yes?: undefined;
+            no?: undefined;
             answers?: undefined;
         })) & (import("@jsprose/core").TagChildren | import("@jsprose/core").NoTagChildren))) & {}>;
     }, undefined>;

package/dist/elements/problem/core.js

@@ -1,6 +1,7 @@
 import { defineEruditProseCoreElements } from "../../coreElement.js";
 import { problemCoreElement } from "./problem.js";
-import { problemAnswer, problemCheckCoreElement, problemDescriptionCoreElement, problemHintCoreElement, problemNote, problemSectionCoreElement, problemSolution } from "./problemContent.js";
+import { problemCheckCoreElement } from "./problemCheck.js";
+import { problemAnswer, problemDescriptionCoreElement, problemHintCoreElement, problemNote, problemSectionCoreElement, problemSolution } from "./problemContent.js";
 import { problemsCoreElement, subProblemCoreElement } from "./problems.js";
 export default defineEruditProseCoreElements(
 	problemDescriptionCoreElement,

package/dist/elements/problem/languages/{en.d.ts → problem/en.d.ts}

@@ -1,3 +1,3 @@
-import type { ProblemPhrases } from '../phrases.js';
+import type { ProblemPhrases } from '../../phrases.js';
 declare const _default: ProblemPhrases;
 export default _default;

package/dist/elements/problem/languages/problem/en.js

@@ -0,0 +1,6 @@
+import { defineElementLanguage } from "../../../../app/language/element.js";
+import en from "../shared/en.js";
+export default defineElementLanguage({
+	...en,
+	element_name: "Problem"
+});

package/dist/elements/problem/languages/{ru.d.ts → problem/ru.d.ts}

@@ -1,3 +1,3 @@
-import type { ProblemPhrases } from '../phrases.js';
+import type { ProblemPhrases } from '../../phrases.js';
 declare const _default: ProblemPhrases;
 export default _default;

package/dist/elements/problem/languages/problem/ru.js

@@ -0,0 +1,6 @@
+import { defineElementLanguage } from "../../../../app/language/element.js";
+import ru from "../shared/ru.js";
+export default defineElementLanguage({
+	...ru,
+	element_name: "Задача"
+});

package/dist/elements/problem/languages/problems/en.d.ts

@@ -0,0 +1,3 @@
+import type { ProblemPhrases } from '../../phrases.js';
+declare const _default: ProblemPhrases;
+export default _default;

package/dist/elements/problem/languages/problems/en.js

@@ -0,0 +1,6 @@
+import { defineElementLanguage } from "../../../../app/language/element.js";
+import en from "../shared/en.js";
+export default defineElementLanguage({
+	...en,
+	element_name: "Problems"
+});

package/dist/elements/problem/languages/problems/ru.d.ts

@@ -0,0 +1,3 @@
+import type { ProblemPhrases } from '../../phrases.js';
+declare const _default: ProblemPhrases;
+export default _default;

package/dist/elements/problem/languages/problems/ru.js

@@ -0,0 +1,6 @@
+import { defineElementLanguage } from "../../../../app/language/element.js";
+import ru from "../shared/ru.js";
+export default defineElementLanguage({
+	...ru,
+	element_name: "Задачи"
+});

package/dist/elements/problem/languages/shared/en.d.ts

@@ -0,0 +1,3 @@
+import type { ProblemPhrases } from '../../phrases.js';
+declare const _default: ProblemPhrases;
+export default _default;