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

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

@@ -1,7 +1,7 @@
-<template>
-    <div>
-        <div class="border-border border-t">
-            <slot></slot>
-        </div>
-    </div>
-</template>
+<template>
+  <div>
+    <div class="border-border border-t">
+      <slot></slot>
+    </div>
+  </div>
+</template>

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,102 +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,87 +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>