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

package/dist/elements/accent/Accent.vue

@@ -1,92 +1,88 @@
-<script lang="ts" setup>
-import { shallowRef } from 'vue';
-import { type ProseElement } from '@jsprose/core';
-
-import {
-    isAccentMainElement,
-    type AccentMainSchema,
-    type AccentSchema,
-    type AccentSectionSchema,
-} from './core.js';
-import { accentSectionNamePhrase, type AccentAppOptions } from './app.js';
-import { useAppElement } from '../../app/composables/appElement.js';
-import { useElementPhrase } from '../../app/composables/language.js';
-import { useElementIcon } from '../../app/composables/elementIcon.js';
-import { useProseContext, type ElementPhrases } from '../../app/index.js';
-import { useFormatText } from '../../app/composables/formatText.js';
-import Block from '../../app/shared/block/Block.vue';
-import Render from '../../app/shared/Render.vue';
-import AccentColumnSection from './AccentColumnSection.vue';
-import AccentRowSections from './AccentRowSections.vue';
-
-const { element } = defineProps<{ element: ProseElement<AccentSchema> }>();
-
-const { EruditIcon } = useProseContext();
-const formatText = useFormatText();
-const appElement = useAppElement(element);
-const accentIcon = await useElementIcon(element);
-const phrase =
-    await useElementPhrase<ElementPhrases<Record<string, string>>>(element);
-
-const mainSection = shallowRef<ProseElement<AccentMainSchema>>();
-const sections = shallowRef<ProseElement<AccentSectionSchema>[]>([]);
-
-for (const child of element.children) {
-    if (isAccentMainElement(child)) {
-        mainSection.value = child;
-    } else {
-        sections.value.push(child);
-    }
-}
-
-const sectionTitles = sections.value.map((section) => {
-    if (section.data.type === 'manual') {
-        return formatText(section.data.title);
-    }
-
-    return formatText(phrase[accentSectionNamePhrase(section.data.name)]);
-});
-
-const accentOptions = (appElement as any)['accent'] as AccentAppOptions;
-</script>
-
-<template>
-    <Block :element>
-        <div
-            :style="{
-                '--accentText': accentOptions.colors.text,
-                '--accentBackground': accentOptions.colors.background,
-                '--accentBorder': accentOptions.colors.border,
-            }"
-            :class="[
-                `rounded-xl border border-(--accentBorder)
-                bg-(--accentBackground)`,
-            ]"
-        >
-            <div
-                class="text-main-lg flex items-center gap-(--proseAsideWidth)
-                    px-(--proseAsideWidth) py-(--proseAsideWidth) font-semibold
-                    text-(--accentText)"
-            >
-                <EruditIcon
-                    :name="accentIcon"
-                    class="-mr-1 shrink-0 text-[1.3em]"
-                />
-                <h2>{{ formatText(element.data.title) }}</h2>
-            </div>
-            <div class="pb-(--proseAsideWidth)">
-                <Render
-                    v-for="sectionChild of mainSection!.children"
-                    :element="sectionChild"
-                />
-            </div>
-            <AccentColumnSection
-                v-if="element.data.layout === 'column'"
-                v-for="(section, i) of sections"
-                :section
-                :title="sectionTitles[i]"
-            />
-            <AccentRowSections v-else :sections :sectionTitles />
-        </div>
-    </Block>
-</template>
+<script lang="ts" setup>
+import { shallowRef } from 'vue';
+import { type ProseElement } from '@jsprose/core';
+
+import {
+  isAccentMainElement,
+  type AccentMainSchema,
+  type AccentSchema,
+  type AccentSectionSchema,
+} from './core.js';
+import { accentSectionNamePhrase, type AccentAppOptions } from './app.js';
+import { useAppElement } from '../../app/composables/appElement.js';
+import { useElementPhrase } from '../../app/composables/language.js';
+import { useElementIcon } from '../../app/composables/elementIcon.js';
+import { useProseContext, type ElementPhrases } from '../../app/index.js';
+import { useFormatText } from '../../app/composables/formatText.js';
+import Block from '../../app/shared/block/Block.vue';
+import Render from '../../app/shared/Render.vue';
+import AccentColumnSection from './AccentColumnSection.vue';
+import AccentRowSections from './AccentRowSections.vue';
+
+const { element } = defineProps<{ element: ProseElement<AccentSchema> }>();
+
+const { EruditIcon } = useProseContext();
+const formatText = useFormatText();
+const appElement = useAppElement(element);
+const accentIcon = await useElementIcon(element);
+const phrase =
+  await useElementPhrase<ElementPhrases<Record<string, string>>>(element);
+
+const mainSection = shallowRef<ProseElement<AccentMainSchema>>();
+const sections = shallowRef<ProseElement<AccentSectionSchema>[]>([]);
+
+for (const child of element.children) {
+  if (isAccentMainElement(child)) {
+    mainSection.value = child;
+  } else {
+    sections.value.push(child);
+  }
+}
+
+const sectionTitles = sections.value.map((section) => {
+  if (section.data.type === 'manual') {
+    return formatText(section.data.title);
+  }
+
+  return formatText(phrase[accentSectionNamePhrase(section.data.name)]);
+});
+
+const accentOptions = (appElement as any)['accent'] as AccentAppOptions;
+</script>
+
+<template>
+  <Block :element>
+    <div
+      :style="{
+        '--accentText': accentOptions.colors.text,
+        '--accentBackground': accentOptions.colors.background,
+        '--accentBorder': accentOptions.colors.border,
+      }"
+      :class="[
+        'rounded-xl border border-(--accentBorder) bg-(--accentBackground)',
+      ]"
+    >
+      <div
+        class="text-main-lg flex items-center gap-(--proseAsideWidth)
+          px-(--proseAsideWidth) py-(--proseAsideWidth) font-semibold
+          text-(--accentText)"
+      >
+        <EruditIcon :name="accentIcon" class="-mr-1 shrink-0 text-[1.3em]" />
+        <h2>{{ formatText(element.data.title) }}</h2>
+      </div>
+      <div class="pb-(--proseAsideWidth)">
+        <Render
+          v-for="sectionChild of mainSection!.children"
+          :element="sectionChild"
+        />
+      </div>
+      <AccentColumnSection
+        v-if="element.data.layout === 'column'"
+        v-for="(section, i) of sections"
+        :section
+        :title="sectionTitles[i]"
+      />
+      <AccentRowSections v-else :sections :sectionTitles />
+    </div>
+  </Block>
+</template>

package/dist/elements/accent/AccentColumnSection.vue

@@ -1,61 +1,61 @@
-<script lang="ts" setup>
-import { ref, watchEffect } from 'vue';
-import type { ProseElement } from '@jsprose/core';
-
-import type { AccentSectionSchema } from './core.js';
-import { useProseContext } from '../../app/composables/context.js';
-import { useContainsAnchor } from '../../app/composables/anchor.js';
-import plusIcon from '../../app/shared/assets/plus.svg?raw';
-import Render from '../../app/shared/Render.vue';
-
-const { section } = defineProps<{
-    title: string;
-    section: ProseElement<AccentSectionSchema>;
-}>();
-
-const { EruditIcon } = useProseContext();
-const containsAnchor = useContainsAnchor(section);
-
-const opened = ref(false);
-
-watchEffect(() => {
-    if (containsAnchor.value) {
-        opened.value = true;
-    }
-});
-</script>
-
-<template>
-    <div>
-        <div
-            @click="opened = !opened"
-            class="group relative flex cursor-pointer items-center border-t
-                border-(--accentBorder) p-(--proseAsideWidth) font-medium
-                text-(--accentText)"
-        >
-            <div class="flex-1">{{ title }}</div>
-            <button
-                class="group-hocus:bg-(--accentBorder)/70 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
-                :class="[
-                    `absolute bottom-0 left-0 w-full border-b border-dashed
-                    border-(--accentBorder)`,
-                    opened ? 'opacity-100' : 'opacity-0',
-                ]"
-            ></div>
-        </div>
-        <div class="py-(--proseAsideWidth)" v-if="opened">
-            <Render v-for="child of section.children" :element="child" />
-        </div>
-    </div>
-</template>
+<script lang="ts" setup>
+import { ref, watchEffect } from 'vue';
+import type { ProseElement } from '@jsprose/core';
+
+import type { AccentSectionSchema } from './core.js';
+import { useProseContext } from '../../app/composables/context.js';
+import { useContainsAnchor } from '../../app/composables/anchor.js';
+import plusIcon from '../../app/shared/assets/plus.svg?raw';
+import Render from '../../app/shared/Render.vue';
+
+const { section } = defineProps<{
+  title: string;
+  section: ProseElement<AccentSectionSchema>;
+}>();
+
+const { EruditIcon } = useProseContext();
+const containsAnchor = useContainsAnchor(section);
+
+const opened = ref(false);
+
+watchEffect(() => {
+  if (containsAnchor.value) {
+    opened.value = true;
+  }
+});
+</script>
+
+<template>
+  <div>
+    <div
+      @click="opened = !opened"
+      class="group relative flex cursor-pointer items-center border-t
+        border-(--accentBorder) p-(--proseAsideWidth) font-medium
+        text-(--accentText)"
+    >
+      <div class="flex-1">{{ title }}</div>
+      <button
+        class="group-hocus:bg-(--accentBorder)/70 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
+        :class="[
+          `absolute bottom-0 left-0 w-full border-b border-dashed
+          border-(--accentBorder)`,
+          opened ? 'opacity-100' : 'opacity-0',
+        ]"
+      ></div>
+    </div>
+    <div class="py-(--proseAsideWidth)" v-if="opened">
+      <Render v-for="child of section.children" :element="child" />
+    </div>
+  </div>
+</template>

package/dist/elements/accent/AccentRowSections.vue

@@ -1,65 +1,64 @@
-<script lang="ts" setup>
-import { ref, watchEffect } from 'vue';
-import type { ProseElement } from '@jsprose/core';
-
-import type { AccentSectionSchema } from './core.js';
-import { useArrayContainsAnchor } from '../../app/composables/anchor.js';
-import Render from '../../app/shared/Render.vue';
-
-const { sections } = defineProps<{
-    sectionTitles: string[];
-    sections: ProseElement<AccentSectionSchema>[];
-}>();
-
-const openedSectionI = ref<number>();
-const containsAnchorI = useArrayContainsAnchor(sections);
-
-watchEffect(() => {
-    if (containsAnchorI.value !== undefined) {
-        openedSectionI.value = containsAnchorI.value;
-    }
-});
-</script>
-
-<template>
-    <div
-        :class="[
-            `relative flex flex-wrap items-center gap-(--proseAsideWidth)
-            p-(--proseAsideWidth) pt-0`,
-        ]"
-    >
-        <button
-            v-for="(_section, i) of sections"
-            @click="openedSectionI = i === openedSectionI ? undefined : i"
-            :class="[
-                `text-main-sm micro:py-2 micro:px-2.5 cursor-pointer rounded-xl
-                px-2 py-1.5 font-medium transition-[color,background]`,
-                i === openedSectionI
-                    ? 'bg-(--accentText)/80 text-white'
-                    : `hocus:bg-(--accentText)/30 bg-(--accentText)/15
-                        text-(--accentText)`,
-            ]"
-        >
-            {{ sectionTitles[i] }}
-        </button>
-        <div
-            :class="[
-                `absolute bottom-0 left-0 w-full border-b
-                border-(--accentBorder)`,
-                openedSectionI === undefined ? 'opacity-0' : 'opacity-100',
-            ]"
-        ></div>
-    </div>
-    <Suspense>
-        <div
-            v-if="openedSectionI !== undefined"
-            :key="openedSectionI"
-            class="py-(--proseAsideWidth)"
-        >
-            <Render
-                v-for="child of sections[openedSectionI].children"
-                :element="child"
-            />
-        </div>
-    </Suspense>
-</template>
+<script lang="ts" setup>
+import { ref, watchEffect } from 'vue';
+import type { ProseElement } from '@jsprose/core';
+
+import type { AccentSectionSchema } from './core.js';
+import { useArrayContainsAnchor } from '../../app/composables/anchor.js';
+import Render from '../../app/shared/Render.vue';
+
+const { sections } = defineProps<{
+  sectionTitles: string[];
+  sections: ProseElement<AccentSectionSchema>[];
+}>();
+
+const openedSectionI = ref<number>();
+const containsAnchorI = useArrayContainsAnchor(sections);
+
+watchEffect(() => {
+  if (containsAnchorI.value !== undefined) {
+    openedSectionI.value = containsAnchorI.value;
+  }
+});
+</script>
+
+<template>
+  <div
+    :class="[
+      `relative flex flex-wrap items-center gap-(--proseAsideWidth)
+      p-(--proseAsideWidth) pt-0`,
+    ]"
+  >
+    <button
+      v-for="(_section, i) of sections"
+      @click="openedSectionI = i === openedSectionI ? undefined : i"
+      :class="[
+        `text-main-sm micro:py-2 micro:px-2.5 cursor-pointer rounded-xl px-2
+        py-1.5 font-medium transition-[color,background]`,
+        i === openedSectionI
+          ? 'bg-(--accentText)/80 text-white'
+          : `hocus:bg-(--accentText)/30 bg-(--accentText)/15
+            text-(--accentText)`,
+      ]"
+    >
+      {{ sectionTitles[i] }}
+    </button>
+    <div
+      :class="[
+        'absolute bottom-0 left-0 w-full border-b border-(--accentBorder)',
+        openedSectionI === undefined ? 'opacity-0' : 'opacity-100',
+      ]"
+    ></div>
+  </div>
+  <Suspense>
+    <div
+      v-if="openedSectionI !== undefined"
+      :key="openedSectionI"
+      class="py-(--proseAsideWidth)"
+    >
+      <Render
+        v-for="child of sections[openedSectionI].children"
+        :element="child"
+      />
+    </div>
+  </Suspense>
+</template>

package/dist/elements/callout/Callout.vue

@@ -1,85 +1,81 @@
-<script lang="ts" setup>
-import type { ProseElement } from '@jsprose/core';
-
-import type { calloutSchema } from './core.js';
-import { useElementStorage } from '../../app/composables/storage.js';
-import { useFormatText } from '../../app/composables/formatText.js';
-import Block from '../../app/shared/block/Block.vue';
-import Render from '../../app/shared/Render.vue';
-
-const { element } = defineProps<{
-    element: ProseElement<typeof calloutSchema>;
-}>();
-const calloutStorage = await useElementStorage<typeof calloutSchema>(element);
-const formatText = useFormatText();
-</script>
-
-<template>
-    <Block :element>
-        <div
-            :style="{ '--calloutBg': 'light-dark(#f7f7f7, #1c1c1c)' }"
-            class="gap-big flex"
-        >
-            <div class="max-micro:hidden shrink-0">
-                <img
-                    :src="calloutStorage.resolvedIconSrc"
-                    loading="lazy"
-                    class="outline-border size-[60px] rounded-full border-2
-                        border-transparent outline-2"
-                />
-            </div>
-            <div
-                class="border-border/90 relative flex-1 rounded-xl border
-                    bg-(--calloutBg) py-(--proseAsideWidth) font-serif
-                    shadow-md"
-            >
-                <div :class="$style.arrow" class="max-micro:hidden">
-                    <div :class="$style.fill"></div>
-                </div>
-                <header
-                    class="gap-small mb-(--proseAsideWidth) flex items-center
-                        px-(--proseAsideWidth) font-semibold"
-                >
-                    <img
-                        :src="calloutStorage.resolvedIconSrc"
-                        class="micro:hidden size-[30px] shrink-0 rounded-full"
-                    />
-                    <div class="text-text-deep flex-1">
-                        {{ formatText(element.data.title) }}
-                    </div>
-                </header>
-                <main class="text-main-sm">
-                    <Render
-                        v-for="child of element.children"
-                        :element="child"
-                    />
-                </main>
-            </div>
-        </div>
-    </Block>
-</template>
-
-<style module>
-.arrow {
-    --arrowSize: 18px;
-    border-bottom: var(--arrowSize) solid transparent;
-    border-right: var(--arrowSize) solid var(--color-border);
-    border-top: var(--arrowSize) solid transparent;
-    height: 0;
-    position: absolute;
-    left: calc(-1 * var(--arrowSize));
-    top: calc(var(--proseAsideWidth) - var(--arrowSize) / 4);
-    width: 0;
-
-    .fill {
-        border-bottom: calc(var(--arrowSize) - 1px) solid transparent;
-        border-right: calc(var(--arrowSize) - 1px) solid var(--calloutBg);
-        border-top: calc(var(--arrowSize) - 1px) solid transparent;
-        height: 0;
-        left: 1.5px;
-        position: absolute;
-        transform: translateY(-50%);
-        width: 0;
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { ProseElement } from '@jsprose/core';
+
+import type { calloutSchema } from './core.js';
+import { useElementStorage } from '../../app/composables/storage.js';
+import { useFormatText } from '../../app/composables/formatText.js';
+import Block from '../../app/shared/block/Block.vue';
+import Render from '../../app/shared/Render.vue';
+
+const { element } = defineProps<{
+  element: ProseElement<typeof calloutSchema>;
+}>();
+const calloutStorage = await useElementStorage<typeof calloutSchema>(element);
+const formatText = useFormatText();
+</script>
+
+<template>
+  <Block :element>
+    <div
+      :style="{ '--calloutBg': 'light-dark(#f7f7f7, #1c1c1c)' }"
+      class="gap-big flex"
+    >
+      <div class="max-micro:hidden shrink-0">
+        <img
+          :src="calloutStorage.resolvedIconSrc"
+          loading="lazy"
+          class="outline-border size-[60px] rounded-full border-2
+            border-transparent outline-2"
+        />
+      </div>
+      <div
+        class="border-border/90 relative flex-1 rounded-xl border
+          bg-(--calloutBg) py-(--proseAsideWidth) font-serif shadow-md"
+      >
+        <div :class="$style.arrow" class="max-micro:hidden">
+          <div :class="$style.fill"></div>
+        </div>
+        <header
+          class="gap-small mb-(--proseAsideWidth) flex items-center
+            px-(--proseAsideWidth) font-semibold"
+        >
+          <img
+            :src="calloutStorage.resolvedIconSrc"
+            class="micro:hidden size-[30px] shrink-0 rounded-full"
+          />
+          <div class="text-text-deep flex-1">
+            {{ formatText(element.data.title) }}
+          </div>
+        </header>
+        <main class="text-main-sm">
+          <Render v-for="child of element.children" :element="child" />
+        </main>
+      </div>
+    </div>
+  </Block>
+</template>
+
+<style module>
+.arrow {
+  --arrowSize: 18px;
+  border-bottom: var(--arrowSize) solid transparent;
+  border-right: var(--arrowSize) solid var(--color-border);
+  border-top: var(--arrowSize) solid transparent;
+  height: 0;
+  position: absolute;
+  left: calc(-1 * var(--arrowSize));
+  top: calc(var(--proseAsideWidth) - var(--arrowSize) / 4);
+  width: 0;
+
+  .fill {
+    border-bottom: calc(var(--arrowSize) - 1px) solid transparent;
+    border-right: calc(var(--arrowSize) - 1px) solid var(--calloutBg);
+    border-top: calc(var(--arrowSize) - 1px) solid transparent;
+    height: 0;
+    left: 1.5px;
+    position: absolute;
+    transform: translateY(-50%);
+    width: 0;
+  }
+}
+</style>

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

@@ -1,15 +1,15 @@
-/**
- * Callouts are used to highlight important information, warnings, or tips within the content.
- *
- * @title Callout
- * @layout block
- * @example
- * ```tsx
- * // import warningIcon from './assets/warning-icon.svg';
- *
- * <Callout icon={warningIcon} title="Important Notice" invert="dark">
- *   <P>Please be aware of the upcoming changes to the schedule.</P>
- * </Callout>
- * ```
- */
-export const Callout = '_tag_';
+/**
+ * Callouts are used to highlight important information, warnings, or tips within the content.
+ *
+ * @title Callout
+ * @layout block
+ * @example
+ * ```tsx
+ * // import warningIcon from './assets/warning-icon.svg';
+ *
+ * <Callout icon={warningIcon} title="Important Notice" invert="dark">
+ *   <P>Please be aware of the upcoming changes to the schedule.</P>
+ * </Callout>
+ * ```
+ */
+export const Callout = '_tag_';