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

package/dist/elements/paragraph/Paragraph.vue

@@ -1,27 +1,25 @@
-<script setup lang="ts">
-import type { ProseElement } from '@jsprose/core';
-
-import type { paragraphSchema } from './core.js';
-import Block from '../../app/shared/block/Block.vue';
-import Render from '../../app/shared/Render.vue';
-
-defineProps<{ element: ProseElement<typeof paragraphSchema> }>();
-</script>
-
-<template>
-    <Block :element>
-        <div
-            :class="[
-                'wrap-break-word',
-                element.data?.center
-                    ? 'text-center'
-                    : 'micro:text-justify text-left',
-                {
-                    'font-serif': element.data?.serif,
-                },
-            ]"
-        >
-            <Render v-for="child of element.children" :element="child" />
-        </div>
-    </Block>
-</template>
+<script setup lang="ts">
+import type { ProseElement } from '@jsprose/core';
+
+import type { paragraphSchema } from './core.js';
+import Block from '../../app/shared/block/Block.vue';
+import Render from '../../app/shared/Render.vue';
+
+defineProps<{ element: ProseElement<typeof paragraphSchema> }>();
+</script>
+
+<template>
+  <Block :element>
+    <div
+      :class="[
+        'wrap-break-word',
+        element.data?.center ? 'text-center' : 'micro:text-justify text-left',
+        {
+          'font-serif': element.data?.serif,
+        },
+      ]"
+    >
+      <Render v-for="child of element.children" :element="child" />
+    </div>
+  </Block>
+</template>

package/dist/elements/paragraph/_global.d.ts

@@ -1,27 +1,27 @@
-/**
- * Paragraph are general prose containers.
- *
- * When writing paragraphs, stick to **"rule of 3"**:
- * * Ideally **3** sentences per paragraph.
- * * After each **3** paragraphs use a different block: heading, list, image, formula, etc.
- *
- * Paragraphs can be centered via `center` prop, and can use serif font style via `serif` prop.
- * Use these with extra caution, as they reduce readability if overused!
- *
- * @title Paragraph
- * @layout block
- * @example
- * ```tsx
- * <P>Normal Paragraph</P>
- *
- * <P center>Centered Paragraph</P>
- * <P serif>Paragraph with serif font style</P>
- * <P center serif>Centered Paragraph with serif font style</P>
- *
- * <P>
- *   Paragraph<Br />
- *   With Line Break
- * </P>
- * ```
- */
-export const P = '_tag_';
+/**
+ * Paragraph are general prose containers.
+ *
+ * When writing paragraphs, stick to **"rule of 3"**:
+ * * Ideally **3** sentences per paragraph.
+ * * After each **3** paragraphs use a different block: heading, list, image, formula, etc.
+ *
+ * Paragraphs can be centered via `center` prop, and can use serif font style via `serif` prop.
+ * Use these with extra caution, as they reduce readability if overused!
+ *
+ * @title Paragraph
+ * @layout block
+ * @example
+ * ```tsx
+ * <P>Normal Paragraph</P>
+ *
+ * <P center>Centered Paragraph</P>
+ * <P serif>Paragraph with serif font style</P>
+ * <P center serif>Centered Paragraph with serif font style</P>
+ *
+ * <P>
+ *   Paragraph<Br />
+ *   With Line Break
+ * </P>
+ * ```
+ */
+export const P = '_tag_';

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

@@ -1,112 +1,112 @@
-import type { ProblemCustomAttribute as PAC } from './shared.js';
-
-/**
- * Problems are used to present exercises and questions to the reader.
- * See the example for a full breakdown of the sub-elements available.
- *
- * All problems are added to TOC and search by default (can be disabled via tag properties).
- *
- * @title Problem
- * @layout block
- * @example
- * ```tsx
- * // Static problem
- * <Problem title="Find the square" level="easy">
- *   <ProblemDescription>
- *     <P>What is the square of 2?</P>
- *     <P>Think carefully about your answer before proceeding to the hints and solution.</P>
- *   </ProblemDescription>
- *
- *   <ProblemHint>
- *     <P>Recall that squaring a number means multiplying it by itself.</P>
- *   </ProblemHint>
- *   <ProblemHint>
- *     <P>For example, the square of 3 is 9, since 3 * 3 = 9.</P>
- *   </ProblemHint>
- *   // More hints...
- *
- *   <ProblemSolution>
- *     <P>Some general phrases visible immediately.</P>
- *
- *     <ProblemSection title="Detailed Solution">
- *       <P>The square of 2 is 4, since 2 * 2 = 4.</P>
- *     </ProblemSection>
- *     // More sections...
- *
- *   </ProblemSolution>
- *
- *   <ProblemAnswer>
- *     <P><M>4</M></P>
- *   </ProblemAnswer>
- *
- *   <ProblemCheck label="The square of 2 is" answer={4} />
- *   // More checks...
- *
- *   <ProblemNote>
- *     In fact, you can find the square of any number by multiplying it by itself!
- *   </ProblemNote>
- * </Problem>
- *
- * // Script problem
- * export const fooScript = defineProblemScript({
- *   isGenerator: true,
- * })(({ initial, random }) => {
- *   const a = initial.nextInt(1, 10);
- *   const b = initial.nextInt(1, 10);
- *
- *   return (
- *     <>
- *       <ProblemDescription>
- *         What is <M>{a} + {b}</M>?
- *       </ProblemDescription>
- *       <ProblemAnswer>
- *         <M>{a + b}</M>
- *       </ProblemAnswer>
- *       <ProblemCheck label="The answer is" answer={a + b} />
- *     </>
- *   );
- * });
- *
- * <Problem title="Addition Problem" level="medium" script={fooScript} />
- * ```
- */
-export const Problem = '_tag_';
-export const ProblemDescription = '_tag_';
-export const ProblemHint = '_tag_';
-export const ProblemSection = '_tag_';
-export const ProblemSolution = '_tag_';
-export const ProblemAnswer = '_tag_';
-export const ProblemNote = '_tag_';
-export const ProblemCheck = '_tag_';
-
-/**
- * Problem set is a collection of related problems presented together.
- * `<Problems>` tag contains general problem information and insude can have multiple `<SubProblem>` tags.
- *
- * Each `<SubProblem>` contains the same problem content tags as single `<Problem>` tag.
- *
- * All problems are added to TOC and search by default (can be disabled via tag properties).
- *
- * @title Problems
- * @layout block
- * @example
- * ```tsx
- * // export const problemScript = defineProblemScript(...) ~> see Problem docs for details
- * <Problems title="Sample Problem Set" level="hard">
- *   <SubProblem label="Example">
- *     <ProblemDescription>
- *       This is an example sub-problem.
- *     </ProblemDescription>
- *   </SubProblem>
- *
- *   <SubProblem script={problemScript} />
- * </Problems>
- * ```
- */
-export const Problems = '_tag_';
-export const SubProblem = '_tag_';
-
-/**
- * Typeguard for creating custom problem attributes.
- */
-export type ProblemCustomAttribute = PAC;
+import type { ProblemCustomAttribute as PAC } from './shared.js';
+
+/**
+ * Problems are used to present exercises and questions to the reader.
+ * See the example for a full breakdown of the sub-elements available.
+ *
+ * All problems are added to TOC and search by default (can be disabled via tag properties).
+ *
+ * @title Problem
+ * @layout block
+ * @example
+ * ```tsx
+ * // Static problem
+ * <Problem title="Find the square" level="easy">
+ *   <ProblemDescription>
+ *     <P>What is the square of 2?</P>
+ *     <P>Think carefully about your answer before proceeding to the hints and solution.</P>
+ *   </ProblemDescription>
+ *
+ *   <ProblemHint>
+ *     <P>Recall that squaring a number means multiplying it by itself.</P>
+ *   </ProblemHint>
+ *   <ProblemHint>
+ *     <P>For example, the square of 3 is 9, since 3 * 3 = 9.</P>
+ *   </ProblemHint>
+ *   // More hints...
+ *
+ *   <ProblemSolution>
+ *     <P>Some general phrases visible immediately.</P>
+ *
+ *     <ProblemSection title="Detailed Solution">
+ *       <P>The square of 2 is 4, since 2 * 2 = 4.</P>
+ *     </ProblemSection>
+ *     // More sections...
+ *
+ *   </ProblemSolution>
+ *
+ *   <ProblemAnswer>
+ *     <P><M>4</M></P>
+ *   </ProblemAnswer>
+ *
+ *   <ProblemCheck label="The square of 2 is" answer={4} />
+ *   // More checks...
+ *
+ *   <ProblemNote>
+ *     In fact, you can find the square of any number by multiplying it by itself!
+ *   </ProblemNote>
+ * </Problem>
+ *
+ * // Script problem
+ * export const fooScript = defineProblemScript({
+ *   isGenerator: true,
+ * })(({ initial, random }) => {
+ *   const a = initial.nextInt(1, 10);
+ *   const b = initial.nextInt(1, 10);
+ *
+ *   return (
+ *     <>
+ *       <ProblemDescription>
+ *         What is <M>{a} + {b}</M>?
+ *       </ProblemDescription>
+ *       <ProblemAnswer>
+ *         <M>{a + b}</M>
+ *       </ProblemAnswer>
+ *       <ProblemCheck label="The answer is" answer={a + b} />
+ *     </>
+ *   );
+ * });
+ *
+ * <Problem title="Addition Problem" level="medium" script={fooScript} />
+ * ```
+ */
+export const Problem = '_tag_';
+export const ProblemDescription = '_tag_';
+export const ProblemHint = '_tag_';
+export const ProblemSection = '_tag_';
+export const ProblemSolution = '_tag_';
+export const ProblemAnswer = '_tag_';
+export const ProblemNote = '_tag_';
+export const ProblemCheck = '_tag_';
+
+/**
+ * Problem set is a collection of related problems presented together.
+ * `<Problems>` tag contains general problem information and insude can have multiple `<SubProblem>` tags.
+ *
+ * Each `<SubProblem>` contains the same problem content tags as single `<Problem>` tag.
+ *
+ * All problems are added to TOC and search by default (can be disabled via tag properties).
+ *
+ * @title Problems
+ * @layout block
+ * @example
+ * ```tsx
+ * // export const problemScript = defineProblemScript(...) ~> see Problem docs for details
+ * <Problems title="Sample Problem Set" level="hard">
+ *   <SubProblem label="Example">
+ *     <ProblemDescription>
+ *       This is an example sub-problem.
+ *     </ProblemDescription>
+ *   </SubProblem>
+ *
+ *   <SubProblem script={problemScript} />
+ * </Problems>
+ * ```
+ */
+export const Problems = '_tag_';
+export const SubProblem = '_tag_';
+
+/**
+ * Typeguard for creating custom problem attributes.
+ */
+export type ProblemCustomAttribute = PAC;

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

@@ -1,22 +1,22 @@
-<script setup lang="ts">
-import type { ProseElement } from '@jsprose/core';
-
-import { problemSchema } from '../problem.js';
-import Block from '../../../app/shared/block/Block.vue';
-import ProblemContainer from './ProblemContainer.vue';
-import ProblemHeader from './ProblemHeader.vue';
-import ProblemContent from './ProblemContent.vue';
-
-const { element } = defineProps<{
-    element: ProseElement<typeof problemSchema>;
-}>();
-</script>
-
-<template>
-    <Block :element>
-        <ProblemContainer>
-            <ProblemHeader :info="element.data.info" />
-            <ProblemContent :element :initialElements="element.children" />
-        </ProblemContainer>
-    </Block>
-</template>
+<script setup lang="ts">
+import type { ProseElement } from '@jsprose/core';
+
+import { problemSchema } from '../problem.js';
+import Block from '../../../app/shared/block/Block.vue';
+import ProblemContainer from './ProblemContainer.vue';
+import ProblemHeader from './ProblemHeader.vue';
+import ProblemContent from './ProblemContent.vue';
+
+const { element } = defineProps<{
+  element: ProseElement<typeof problemSchema>;
+}>();
+</script>
+
+<template>
+  <Block :element>
+    <ProblemContainer>
+      <ProblemHeader :info="element.data.info" />
+      <ProblemContent :element :initialElements="element.children" />
+    </ProblemContainer>
+  </Block>
+</template>

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

@@ -1,21 +1,20 @@
-<script lang="ts" setup>
-defineProps<{ active?: boolean }>();
-</script>
-
-<template>
-    <button
-        :class="[
-            `bg-bg-main border-border/80 text-main-xs micro:px-2.5 min-w-[30px]
-            cursor-pointer rounded border px-1.5 py-[5px] font-semibold shadow
-            shadow-[light-dark(#d9d9d9,#3c3c3c)]
-            transition-[color,background,border,box-shadow]`,
-            {
-                'border-brand/50 bg-brand/10 text-brand': active,
-                ['text-text-muted hocus:text-brand hocus:border-brand/50']:
-                    !active,
-            },
-        ]"
-    >
-        <slot></slot>
-    </button>
-</template>
+<script lang="ts" setup>
+defineProps<{ active?: boolean }>();
+</script>
+
+<template>
+  <button
+    :class="[
+      `bg-bg-main border-border/80 text-main-xs micro:px-2.5 min-w-[30px]
+      cursor-pointer rounded border px-1.5 py-[5px] font-semibold shadow
+      shadow-[light-dark(#d9d9d9,#3c3c3c)]
+      transition-[color,background,border,box-shadow]`,
+      {
+        'border-brand/50 bg-brand/10 text-brand': active,
+        ['text-text-muted hocus:text-brand hocus:border-brand/50']: !active,
+      },
+    ]"
+  >
+    <slot></slot>
+  </button>
+</template>

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

@@ -1,8 +1,8 @@
-<template>
-    <div
-        class="bg-bg-accent/30 dark:bg-bg-accent/50 border-border/50
-            dark:border-border/90 rounded-xl border"
-    >
-        <slot></slot>
-    </div>
-</template>
+<template>
+  <div
+    class="bg-bg-accent/30 dark:bg-bg-accent/50 border-border/50
+      dark:border-border/90 rounded-xl border"
+  >
+    <slot></slot>
+  </div>
+</template>