@erudit-js/prose 4.0.0 → 4.1.0

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

@@ -1,57 +1,57 @@
-<script lang="ts" setup>
-import { ref, watchEffect } from 'vue';
-import type { AnySchema, ProseElement } from '@jsprose/core';
-
-import plusIcon from '../../../app/shared/assets/plus.svg?raw';
-import { useProseContext } from '../../../app/composables/context.js';
-import { useFormatText } from '../../../app/composables/formatText.js';
-import { useContainsAnchor } from '../../../app/composables/anchor.js';
-import Render from '../../../app/shared/Render.vue';
-
-const { element } = defineProps<{
-  title: string;
-  element: ProseElement<AnySchema>;
-}>();
-
-const formatText = useFormatText();
-const { EruditIcon } = useProseContext();
-const opened = ref(false);
-const containsAnchor = useContainsAnchor(element);
-
-watchEffect(() => {
-  if (containsAnchor.value) {
-    opened.value = true;
-  }
-});
-</script>
-
-<template>
-  <div
-    @click="opened = !opened"
-    class="group border-border text-text-muted relative flex cursor-pointer
-      items-center border-t p-(--proseAsideWidth) font-semibold
-      first:border-t-0"
-  >
-    <div class="flex-1">{{ formatText(title) }}</div>
-    <button
-      class="group-hocus:bg-border/80 text-text-muted shrink-0 rounded
-        bg-transparent p-0.5 transition-[background]"
-    >
-      <EruditIcon
-        :name="plusIcon"
-        :class="[
-          'micro:text-[26px] text-[22px] transition-[rotate]',
-          opened ? 'rotate-45' : '',
-        ]"
-      />
-    </button>
-  </div>
-  <Suspense>
-    <div
-      v-if="opened"
-      class="border-border border-t border-dashed py-(--proseAsideWidth)"
-    >
-      <Render v-for="child of element.children" :element="child" />
-    </div>
-  </Suspense>
-</template>
+<script lang="ts" setup>
+import { ref, watchEffect } from 'vue';
+import type { AnySchema, ProseElement } from '@jsprose/core';
+
+import plusIcon from '../../../app/shared/assets/plus.svg?raw';
+import { useProseContext } from '../../../app/composables/context.js';
+import { useFormatText } from '../../../app/composables/formatText.js';
+import { useContainsAnchor } from '../../../app/composables/anchor.js';
+import Render from '../../../app/shared/Render.vue';
+
+const { element } = defineProps<{
+  title: string;
+  element: ProseElement<AnySchema>;
+}>();
+
+const formatText = useFormatText();
+const { EruditIcon } = useProseContext();
+const opened = ref(false);
+const containsAnchor = useContainsAnchor(element);
+
+watchEffect(() => {
+  if (containsAnchor.value) {
+    opened.value = true;
+  }
+});
+</script>
+
+<template>
+  <div
+    @click="opened = !opened"
+    class="group border-border text-text-muted relative flex cursor-pointer
+      items-center border-t p-(--proseAsideWidth) font-semibold
+      first:border-t-0"
+  >
+    <div class="flex-1">{{ formatText(title) }}</div>
+    <button
+      class="group-hocus:bg-border/80 text-text-muted shrink-0 rounded
+        bg-transparent p-0.5 transition-[background]"
+    >
+      <EruditIcon
+        :name="plusIcon"
+        :class="[
+          'micro:text-[26px] text-[22px] transition-[rotate]',
+          opened ? 'rotate-45' : '',
+        ]"
+      />
+    </button>
+  </div>
+  <Suspense>
+    <div
+      v-if="opened"
+      class="border-border border-t border-dashed py-(--proseAsideWidth)"
+    >
+      <Render v-for="child of element.children" :element="child" />
+    </div>
+  </Suspense>
+</template>

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

@@ -1,100 +1,100 @@
-<script lang="ts" setup>
-import { useProseContext } from '../../../app/composables/context.js';
-import { useFormatText } from '../../../app/composables/formatText.js';
-import { useProblemPhrase } from '../composables/phrase.js';
-import type { ProblemAttribute, ProblemInfo, ProblemLevel } from '../shared.js';
-
-const { info } = defineProps<{
-  info: ProblemInfo;
-}>();
-
-const { EruditIcon } = useProseContext();
-const formatText = useFormatText();
-const phrase = await useProblemPhrase();
-
-const attributeIcons: Record<ProblemAttribute, string> = Object.fromEntries(
-  Object.entries(
-    // @ts-ignore
-    import.meta.glob('../assets/attributes/*.svg', {
-      query: 'raw',
-      eager: true,
-      import: 'default',
-    }),
-  ).map(([key, value]) => {
-    const name = key.split('/').pop()?.replace('.svg', '') ?? key;
-    return [name as any, value as string];
-  }),
-);
-
-const levelEmojies: Record<ProblemLevel, string> = {
-  example: '👀',
-  easy: '😀',
-  medium: '🤔',
-  hard: '🤯',
-};
-
-const levelColors: Record<ProblemLevel, string> = {
-  example: 'light-dark(#1c8baf, #2a9ab8)',
-  easy: 'light-dark(#73af00, #79b800)',
-  medium: 'light-dark(#db9c00, #ffc01e)',
-  hard: 'light-dark(#dc2f51, #ff375f)',
-};
-</script>
-
-<template>
-  <header
-    class="micro:flex-row micro:items-center micro:gap-normal gap-small flex
-      flex-col flex-wrap p-(--proseAsideWidth) pb-0"
-  >
-    <h2 class="text-text-deep text-main-lg flex-1 font-bold">
-      {{ formatText(info.title) }}
-    </h2>
-    <div
-      class="micro:[--labelHeight:32px] gap-small micro:justify-start
-        micro:flex-row flex flex-row-reverse flex-wrap items-center justify-end
-        [--labelHeight:28px]"
-    >
-      <div
-        v-for="attribute of info.attributes.sort()"
-        :title="
-          typeof attribute === 'string'
-            ? phrase[`attribute_explain.${attribute}`]
-            : attribute.hint
-        "
-        class="border-border/60 bg-bg-main text-main-xs text-text-muted flex
-          h-(--labelHeight) cursor-help items-center gap-1 rounded-xl border
-          px-2 shadow shadow-[light-dark(#d9d9d9,#3c3c3c)]"
-      >
-        <EruditIcon
-          v-if="typeof attribute === 'string' || attribute.icon"
-          :name="
-            typeof attribute === 'string'
-              ? attributeIcons[attribute]
-              : attribute.icon
-          "
-          class="text-[15px]"
-        />
-        <span>
-          {{
-            typeof attribute === 'string'
-              ? phrase[`attribute.${attribute}`]
-              : attribute.label
-          }}
-        </span>
-      </div>
-      <div
-        :style="{ '--levelColor': levelColors[info.level] }"
-        :title="phrase.level_hint"
-        class="text-main-xs flex h-(--labelHeight) cursor-help items-center
-          gap-1 rounded-xl border border-(--levelColor)/30 bg-(--levelColor)/10
-          px-2 font-semibold text-(--levelColor) shadow
-          shadow-(color:--levelColor)/25"
-      >
-        <div class="text-[15px]">
-          {{ levelEmojies[info.level] }}
-        </div>
-        <div>{{ phrase[`level.${info.level}`] }}</div>
-      </div>
-    </div>
-  </header>
-</template>
+<script lang="ts" setup>
+import { useProseContext } from '../../../app/composables/context.js';
+import { useFormatText } from '../../../app/composables/formatText.js';
+import { useProblemPhrase } from '../composables/phrase.js';
+import type { ProblemAttribute, ProblemInfo, ProblemLevel } from '../shared.js';
+
+const { info } = defineProps<{
+  info: ProblemInfo;
+}>();
+
+const { EruditIcon } = useProseContext();
+const formatText = useFormatText();
+const phrase = await useProblemPhrase();
+
+const attributeIcons: Record<ProblemAttribute, string> = Object.fromEntries(
+  Object.entries(
+    // @ts-ignore
+    import.meta.glob('../assets/attributes/*.svg', {
+      query: 'raw',
+      eager: true,
+      import: 'default',
+    }),
+  ).map(([key, value]) => {
+    const name = key.split('/').pop()?.replace('.svg', '') ?? key;
+    return [name as any, value as string];
+  }),
+);
+
+const levelEmojies: Record<ProblemLevel, string> = {
+  example: '👀',
+  easy: '😀',
+  medium: '🤔',
+  hard: '🤯',
+};
+
+const levelColors: Record<ProblemLevel, string> = {
+  example: 'light-dark(#1c8baf, #2a9ab8)',
+  easy: 'light-dark(#73af00, #79b800)',
+  medium: 'light-dark(#db9c00, #ffc01e)',
+  hard: 'light-dark(#dc2f51, #ff375f)',
+};
+</script>
+
+<template>
+  <header
+    class="micro:flex-row micro:items-center micro:gap-normal gap-small flex
+      flex-col flex-wrap p-(--proseAsideWidth) pb-0"
+  >
+    <h2 class="text-text-deep text-main-lg flex-1 font-bold">
+      {{ formatText(info.title) }}
+    </h2>
+    <div
+      class="micro:[--labelHeight:32px] gap-small micro:justify-start
+        micro:flex-row flex flex-row-reverse flex-wrap items-center justify-end
+        [--labelHeight:28px]"
+    >
+      <div
+        v-for="attribute of info.attributes.sort()"
+        :title="
+          typeof attribute === 'string'
+            ? phrase[`attribute_explain.${attribute}`]
+            : attribute.hint
+        "
+        class="border-border/60 bg-bg-main text-main-xs text-text-muted flex
+          h-(--labelHeight) cursor-help items-center gap-1 rounded-xl border
+          px-2 shadow shadow-[light-dark(#d9d9d9,#3c3c3c)]"
+      >
+        <EruditIcon
+          v-if="typeof attribute === 'string' || attribute.icon"
+          :name="
+            typeof attribute === 'string'
+              ? attributeIcons[attribute]
+              : attribute.icon
+          "
+          class="text-[15px]"
+        />
+        <span>
+          {{
+            typeof attribute === 'string'
+              ? phrase[`attribute.${attribute}`]
+              : attribute.label
+          }}
+        </span>
+      </div>
+      <div
+        :style="{ '--levelColor': levelColors[info.level] }"
+        :title="phrase.level_hint"
+        class="text-main-xs flex h-(--labelHeight) cursor-help items-center
+          gap-1 rounded-xl border border-(--levelColor)/30 bg-(--levelColor)/10
+          px-2 font-semibold text-(--levelColor) shadow
+          shadow-(color:--levelColor)/25"
+      >
+        <div class="text-[15px]">
+          {{ levelEmojies[info.level] }}
+        </div>
+        <div>{{ phrase[`level.${info.level}`] }}</div>
+      </div>
+    </div>
+  </header>
+</template>

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

@@ -1,83 +1,83 @@
-<script setup lang="ts">
-import { ref, watchEffect } from 'vue';
-import {
-  isProseElement,
-  type BlockSchema,
-  type ProseElement,
-} from '@jsprose/core';
-
-import { subProblemSchema, type problemsSchema } from '../problems.js';
-import { useFormatText } from '../../../app/composables/formatText.js';
-import { useArrayContainsAnchor } from '../../../app/composables/anchor.js';
-import SubProblem from './SubProblem.vue';
-import Block from '../../../app/shared/block/Block.vue';
-import ProblemContainer from './ProblemContainer.vue';
-import ProblemHeader from './ProblemHeader.vue';
-import Render from '../../../app/shared/Render.vue';
-import ProblemButton from './ProblemButton.vue';
-
-const { element } = defineProps<{
-  element: ProseElement<typeof problemsSchema>;
-}>();
-
-const formatText = useFormatText();
-
-const sharedChildren = element.children.filter(
-  (child) => !isProseElement(child, subProblemSchema),
-) as ProseElement<BlockSchema>[];
-
-const subProblems = element.children.filter((child) =>
-  isProseElement(child, subProblemSchema),
-) as ProseElement<typeof subProblemSchema>[];
-
-const activeSubProblemI = ref(0);
-
-function getUnlabeledOrdinal(index: number) {
-  let count = 0;
-  for (let i = 0; i <= index; i++) {
-    if (!subProblems[i].data.label) count++;
-  }
-  return count;
-}
-
-const containsAnchorI = useArrayContainsAnchor(subProblems);
-
-watchEffect(() => {
-  if (containsAnchorI.value !== undefined) {
-    activeSubProblemI.value = containsAnchorI.value;
-  }
-});
-</script>
-
-<template>
-  <Block :element>
-    <ProblemContainer>
-      <ProblemHeader :info="element.data" />
-      <div v-if="sharedChildren.length" class="pt-(--proseAsideWidth)">
-        <Render v-for="sharedChild of sharedChildren" :element="sharedChild" />
-      </div>
-      <div
-        class="gap-small micro:gap-normal border-border micro:*:px-4 flex
-          flex-wrap border-b px-(--proseAsideWidth) py-(--proseAsideWidth)"
-      >
-        <ProblemButton
-          v-for="(subProblem, i) of subProblems"
-          :active="i === activeSubProblemI"
-          @click="activeSubProblemI = i"
-        >
-          {{
-            subProblem.data.label
-              ? formatText(subProblem.data.label)
-              : getUnlabeledOrdinal(i)
-          }}
-        </ProblemButton>
-      </div>
-      <Suspense>
-        <SubProblem
-          :key="activeSubProblemI"
-          :element="subProblems[activeSubProblemI]"
-        />
-      </Suspense>
-    </ProblemContainer>
-  </Block>
-</template>
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue';
+import {
+  isProseElement,
+  type BlockSchema,
+  type ProseElement,
+} from '@jsprose/core';
+
+import { subProblemSchema, type problemsSchema } from '../problems.js';
+import { useFormatText } from '../../../app/composables/formatText.js';
+import { useArrayContainsAnchor } from '../../../app/composables/anchor.js';
+import SubProblem from './SubProblem.vue';
+import Block from '../../../app/shared/block/Block.vue';
+import ProblemContainer from './ProblemContainer.vue';
+import ProblemHeader from './ProblemHeader.vue';
+import Render from '../../../app/shared/Render.vue';
+import ProblemButton from './ProblemButton.vue';
+
+const { element } = defineProps<{
+  element: ProseElement<typeof problemsSchema>;
+}>();
+
+const formatText = useFormatText();
+
+const sharedChildren = element.children.filter(
+  (child) => !isProseElement(child, subProblemSchema),
+) as ProseElement<BlockSchema>[];
+
+const subProblems = element.children.filter((child) =>
+  isProseElement(child, subProblemSchema),
+) as ProseElement<typeof subProblemSchema>[];
+
+const activeSubProblemI = ref(0);
+
+function getUnlabeledOrdinal(index: number) {
+  let count = 0;
+  for (let i = 0; i <= index; i++) {
+    if (!subProblems[i].data.label) count++;
+  }
+  return count;
+}
+
+const containsAnchorI = useArrayContainsAnchor(subProblems);
+
+watchEffect(() => {
+  if (containsAnchorI.value !== undefined) {
+    activeSubProblemI.value = containsAnchorI.value;
+  }
+});
+</script>
+
+<template>
+  <Block :element>
+    <ProblemContainer>
+      <ProblemHeader :info="element.data" />
+      <div v-if="sharedChildren.length" class="pt-(--proseAsideWidth)">
+        <Render v-for="sharedChild of sharedChildren" :element="sharedChild" />
+      </div>
+      <div
+        class="gap-small micro:gap-normal border-border micro:*:px-4 flex
+          flex-wrap border-b px-(--proseAsideWidth) py-(--proseAsideWidth)"
+      >
+        <ProblemButton
+          v-for="(subProblem, i) of subProblems"
+          :active="i === activeSubProblemI"
+          @click="activeSubProblemI = i"
+        >
+          {{
+            subProblem.data.label
+              ? formatText(subProblem.data.label)
+              : getUnlabeledOrdinal(i)
+          }}
+        </ProblemButton>
+      </div>
+      <Suspense>
+        <SubProblem
+          :key="activeSubProblemI"
+          :element="subProblems[activeSubProblemI]"
+        />
+      </Suspense>
+    </ProblemContainer>
+  </Block>
+</template>

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

@@ -1,14 +1,14 @@
-<script lang="ts" setup>
-import type { ProseElement } from '@jsprose/core';
-
-import type { subProblemSchema } from '../problems.js';
-import ProblemContent from './ProblemContent.vue';
-
-const { element } = defineProps<{
-  element: ProseElement<typeof subProblemSchema>;
-}>();
-</script>
-
-<template>
-  <ProblemContent :element :initialElements="element.children" />
-</template>
+<script lang="ts" setup>
+import type { ProseElement } from '@jsprose/core';
+
+import type { subProblemSchema } from '../problems.js';
+import ProblemContent from './ProblemContent.vue';
+
+const { element } = defineProps<{
+  element: ProseElement<typeof subProblemSchema>;
+}>();
+</script>
+
+<template>
+  <ProblemContent :element :initialElements="element.children" />
+</template>