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

package/dist/elements/horizontalLine/HorizontalLine.vue

@@ -1,6 +1,6 @@
-<template>
-    <hr
-        class="border-border mx-(--proseAsideWidth) mt-(--proseGap) rounded
-            border-0 border-b"
-    />
-</template>
+<template>
+  <hr
+    class="border-border mx-(--proseAsideWidth) mt-(--proseGap) rounded border-0
+      border-b"
+  />
+</template>

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

@@ -1,17 +1,17 @@
-/**
- * Horizontal lines are used to separate prose content in places
- * where it is not possible to use headings or built-in block separators.
- *
- * Use with extra caution, as overuse of horizontal lines can make prose look cluttered!
- * When possible, prefer other means of content separation.
- *
- * @title Horizontal Line
- * @layout block
- * @example
- * ```tsx
- * <P>Paragraph 1</P>
- * <Hr />
- * <P>Paragraph 2</P>
- * ```
- */
-export const Hr = '_tag_';
+/**
+ * Horizontal lines are used to separate prose content in places
+ * where it is not possible to use headings or built-in block separators.
+ *
+ * Use with extra caution, as overuse of horizontal lines can make prose look cluttered!
+ * When possible, prefer other means of content separation.
+ *
+ * @title Horizontal Line
+ * @layout block
+ * @example
+ * ```tsx
+ * <P>Paragraph 1</P>
+ * <Hr />
+ * <P>Paragraph 2</P>
+ * ```
+ */
+export const Hr = '_tag_';

package/dist/elements/image/Image.vue

@@ -1,15 +1,15 @@
-<script setup lang="ts">
-import type { ProseElement } from '@jsprose/core';
-
-import type { imageSchema } from './core.js';
-import Block from '../../app/shared/block/Block.vue';
-import ImageElement from './ImageElement.vue';
-
-defineProps<{ element: ProseElement<typeof imageSchema> }>();
-</script>
-
-<template>
-    <Block :element>
-        <ImageElement :element />
-    </Block>
-</template>
+<script setup lang="ts">
+import type { ProseElement } from '@jsprose/core';
+
+import type { imageSchema } from './core.js';
+import Block from '../../app/shared/block/Block.vue';
+import ImageElement from './ImageElement.vue';
+
+defineProps<{ element: ProseElement<typeof imageSchema> }>();
+</script>
+
+<template>
+  <Block :element>
+    <ImageElement :element />
+  </Block>
+</template>

package/dist/elements/image/ImageElement.vue

@@ -1,80 +1,80 @@
-<script setup lang="ts">
-import { shallowRef } from 'vue';
-import type { ProseElement } from '@jsprose/core';
-
-import type { imageSchema } from './core.js';
-import { useElementStorage } from '../../app/composables/storage.js';
-import { usePhotoSwipe } from '../../app/shared/photoswipe/composable.js';
-import { lightInvert, darkInvert } from '../../app/shared/invert.js';
-import Caption from '../caption/Caption.vue';
-
-const { element } = defineProps<{
-    element: ProseElement<typeof imageSchema>;
-}>();
-const imageStorage = await useElementStorage<typeof imageSchema>(element);
-
-const captionElement = shallowRef<HTMLElement>();
-const { lightbox, initLightbox } = usePhotoSwipe();
-
-function imageClick() {
-    if (!lightbox.value) {
-        initLightbox(
-            {
-                dataSource: [
-                    {
-                        src: imageStorage.resolvedSrc,
-                        width: imageStorage.width,
-                        height: imageStorage.height,
-                        type: 'image',
-                    },
-                ],
-            },
-            captionElement.value,
-        );
-
-        lightbox.value!.on('contentActivate', (event) => {
-            event.content.element!.className +=
-                ' ' +
-                (element.data.invert === 'light'
-                    ? lightInvert
-                    : element.data.invert === 'dark'
-                      ? darkInvert
-                      : '');
-        });
-    }
-
-    lightbox.value!.loadAndOpen(0);
-}
-</script>
-
-<template>
-    <div class="text-center">
-        <img
-            :src="imageStorage.resolvedSrc"
-            @click="imageClick"
-            loading="lazy"
-            v-bind="
-                element.data.width
-                    ? {
-                          style: {
-                              width: element.data.width,
-                              maxWidth: `min(${element.data.width}, 100%)`,
-                          },
-                      }
-                    : {}
-            "
-            :class="[
-                'inline-block cursor-pointer rounded-xl',
-                {
-                    [lightInvert]: element.data.invert === 'light',
-                    [darkInvert]: element.data.invert === 'dark',
-                },
-            ]"
-        />
-    </div>
-    <Caption
-        v-if="element.children"
-        @captionMounted="(element) => (captionElement = element)"
-        :caption="element.children[0]"
-    />
-</template>
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import type { ProseElement } from '@jsprose/core';
+
+import type { imageSchema } from './core.js';
+import { useElementStorage } from '../../app/composables/storage.js';
+import { usePhotoSwipe } from '../../app/shared/photoswipe/composable.js';
+import { lightInvert, darkInvert } from '../../app/shared/invert.js';
+import Caption from '../caption/Caption.vue';
+
+const { element } = defineProps<{
+  element: ProseElement<typeof imageSchema>;
+}>();
+const imageStorage = await useElementStorage<typeof imageSchema>(element);
+
+const captionElement = shallowRef<HTMLElement>();
+const { lightbox, initLightbox } = usePhotoSwipe();
+
+function imageClick() {
+  if (!lightbox.value) {
+    initLightbox(
+      {
+        dataSource: [
+          {
+            src: imageStorage.resolvedSrc,
+            width: imageStorage.width,
+            height: imageStorage.height,
+            type: 'image',
+          },
+        ],
+      },
+      captionElement.value,
+    );
+
+    lightbox.value!.on('contentActivate', (event) => {
+      event.content.element!.className +=
+        ' ' +
+        (element.data.invert === 'light'
+          ? lightInvert
+          : element.data.invert === 'dark'
+            ? darkInvert
+            : '');
+    });
+  }
+
+  lightbox.value!.loadAndOpen(0);
+}
+</script>
+
+<template>
+  <div class="text-center">
+    <img
+      :src="imageStorage.resolvedSrc"
+      @click="imageClick"
+      loading="lazy"
+      v-bind="
+        element.data.width
+          ? {
+              style: {
+                width: element.data.width,
+                maxWidth: `min(${element.data.width}, 100%)`,
+              },
+            }
+          : {}
+      "
+      :class="[
+        'inline-block cursor-pointer rounded-xl',
+        {
+          [lightInvert]: element.data.invert === 'light',
+          [darkInvert]: element.data.invert === 'dark',
+        },
+      ]"
+    />
+  </div>
+  <Caption
+    v-if="element.children"
+    @captionMounted="(element) => (captionElement = element)"
+    :caption="element.children[0]"
+  />
+</template>

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

@@ -1,18 +1,18 @@
-/**
- * **Caution:** images should be placed locally somewhere within current Erudit project folder
- * (preferable somewhere near the document using them).
- *
- * @title Image
- * @layout block
- * @example
- * ```tsx
- * // import vectorProjection from './assets/vector-projection.svg';
- * <Image src={vectorProjection} width="400px" invert="dark" />
- *
- * // import complexDiagram from './assets/complex-diagram.png';
- * <Image src={complexDiagram}>
- *   <Caption>Complex diagram example</Caption>
- * </Image>
- * ```
- */
-export const Image = '_tag_';
+/**
+ * **Caution:** images should be placed locally somewhere within current Erudit project folder
+ * (preferable somewhere near the document using them).
+ *
+ * @title Image
+ * @layout block
+ * @example
+ * ```tsx
+ * // import vectorProjection from './assets/vector-projection.svg';
+ * <Image src={vectorProjection} width="400px" invert="dark" />
+ *
+ * // import complexDiagram from './assets/complex-diagram.png';
+ * <Image src={complexDiagram}>
+ *   <Caption>Complex diagram example</Caption>
+ * </Image>
+ * ```
+ */
+export const Image = '_tag_';

package/dist/elements/lineBreak/LineBreak.vue

@@ -1,3 +1,3 @@
-<template>
-    <br />
-</template>
+<template>
+  <br />
+</template>

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

@@ -1,18 +1,18 @@
-/**
- * By default text is aligned stretch to fill the line width in wide layouts and left-aligned in narrow layouts.
- * Line breaking is done automatically based on the available width.
- *
- * `<Br />` can be used to manually break the line.
- *
- * @title Line Break
- * @layout inliner
- * @example
- * ```tsx
- * <>
- *   Snow on the ground.<Br />
- *   Snow on the tree.<Br />
- *   Snow on the house.<Br />
- *   Snow on me!
- * </>
- */
-export const Br = '_tag_';
+/**
+ * By default text is aligned stretch to fill the line width in wide layouts and left-aligned in narrow layouts.
+ * Line breaking is done automatically based on the available width.
+ *
+ * `<Br />` can be used to manually break the line.
+ *
+ * @title Line Break
+ * @layout inliner
+ * @example
+ * ```tsx
+ * <>
+ *   Snow on the ground.<Br />
+ *   Snow on the tree.<Br />
+ *   Snow on the house.<Br />
+ *   Snow on me!
+ * </>
+ */
+export const Br = '_tag_';

package/dist/elements/link/BlockLink.vue

@@ -1,110 +1,108 @@
-<script lang="ts" setup>
-import { shallowRef } from 'vue';
-import { ProseError, type ProseElement } from '@jsprose/core';
-
-import type { dependencySchema } from './dependency/core.js';
-import type { referenceSchema } from './reference/core.js';
-import type { LinkStorage } from './storage.js';
-import { useProseContext } from '../../app/composables/context.js';
-import { useElementStorage } from '../../app/composables/storage.js';
-import { useFormatText } from '../../app/composables/formatText.js';
-import { useElementPhrase } from '../../app/composables/language.js';
-import { useElementIcon } from '../../app/composables/elementIcon.js';
-import Block from '../../app/shared/block/Block.vue';
-
-const { element } = defineProps<{
-    element:
-        | ProseElement<typeof referenceSchema>
-        | ProseElement<typeof dependencySchema>;
-}>();
-
-const { EruditLink, EruditIcon, eruditIcons } = useProseContext();
-const linkStorage = (await useElementStorage(element as any)) as LinkStorage;
-const formatText = useFormatText();
-
-interface UIData {
-    icon: string;
-    text: string;
-    secondary?: {
-        icon: string;
-        text: string;
-    };
-}
-
-const uiData = shallowRef<UIData>();
-
-switch (linkStorage.type) {
-    case 'unique':
-        const elementPhrase = await useElementPhrase(linkStorage.schemaName);
-        uiData.value = {
-            icon: await useElementIcon(linkStorage.schemaName),
-            text: linkStorage.elementTitle || elementPhrase.element_name,
-            secondary: {
-                icon: eruditIcons[
-                    linkStorage.content.contentType === 'topic'
-                        ? linkStorage.content.topicPart
-                        : linkStorage.content.contentType
-                ],
-                text: linkStorage.content.contentTitle,
-            },
-        };
-        break;
-    case 'contentItem':
-        uiData.value = {
-            icon: eruditIcons[
-                linkStorage.content.contentType === 'topic'
-                    ? linkStorage.content.topicPart
-                    : linkStorage.content.contentType
-            ],
-            text: linkStorage.content.contentTitle,
-        };
-        break;
-    default:
-        throw new ProseError(
-            'BlockLink supports only Unique and Document link types!',
-        );
-}
-</script>
-
-<template>
-    <Block :element>
-        <EruditLink
-            target="_blank"
-            :to="linkStorage.resolvedHref"
-            class="group bg-brand/5 border-brand/20 hocus:bg-brand/10
-                hocus:border-brand/40 relative block rounded-xl border-2
-                border-dashed p-(--proseAsideWidth)
-                transition-[border,background]"
-        >
-            <EruditIcon
-                name="arrow/outward"
-                class="text-brand/15 group-hocus:text-brand/20 top-small
-                    right-small absolute shrink-0 text-[60px]"
-            />
-            <div
-                class="text-brand/80 group-hocus:text-brand mb-small gap-small
-                    font-medium transition-[color]"
-            >
-                <EruditIcon
-                    :name="uiData!.icon"
-                    class="mr-small relative top-0.5 inline align-baseline
-                        text-[1.1em]"
-                />
-                <span>{{ formatText(uiData!.text) }}</span>
-            </div>
-            <div class="text-text-muted">
-                {{ formatText(element.data.label) }}
-            </div>
-            <div
-                v-if="uiData!.secondary"
-                class="text-text-dimmed mt-small text-main-xs"
-            >
-                <EruditIcon
-                    :name="uiData!.secondary!.icon"
-                    class="mr-small relative top-0.5 inline align-baseline"
-                />
-                <span>{{ formatText(uiData!.secondary!.text) }}</span>
-            </div>
-        </EruditLink>
-    </Block>
-</template>
+<script lang="ts" setup>
+import { shallowRef } from 'vue';
+import { ProseError, type ProseElement } from '@jsprose/core';
+
+import type { dependencySchema } from './dependency/core.js';
+import type { referenceSchema } from './reference/core.js';
+import type { LinkStorage } from './storage.js';
+import { useProseContext } from '../../app/composables/context.js';
+import { useElementStorage } from '../../app/composables/storage.js';
+import { useFormatText } from '../../app/composables/formatText.js';
+import { useElementPhrase } from '../../app/composables/language.js';
+import { useElementIcon } from '../../app/composables/elementIcon.js';
+import Block from '../../app/shared/block/Block.vue';
+
+const { element } = defineProps<{
+  element:
+    | ProseElement<typeof referenceSchema>
+    | ProseElement<typeof dependencySchema>;
+}>();
+
+const { EruditLink, EruditIcon, eruditIcons } = useProseContext();
+const linkStorage = (await useElementStorage(element as any)) as LinkStorage;
+const formatText = useFormatText();
+
+interface UIData {
+  icon: string;
+  text: string;
+  secondary?: {
+    icon: string;
+    text: string;
+  };
+}
+
+const uiData = shallowRef<UIData>();
+
+switch (linkStorage.type) {
+  case 'unique':
+    const elementPhrase = await useElementPhrase(linkStorage.schemaName);
+    uiData.value = {
+      icon: await useElementIcon(linkStorage.schemaName),
+      text: linkStorage.elementTitle || elementPhrase.element_name,
+      secondary: {
+        icon: eruditIcons[
+          linkStorage.content.contentType === 'topic'
+            ? linkStorage.content.topicPart
+            : linkStorage.content.contentType
+        ],
+        text: linkStorage.content.contentTitle,
+      },
+    };
+    break;
+  case 'contentItem':
+    uiData.value = {
+      icon: eruditIcons[
+        linkStorage.content.contentType === 'topic'
+          ? linkStorage.content.topicPart
+          : linkStorage.content.contentType
+      ],
+      text: linkStorage.content.contentTitle,
+    };
+    break;
+  default:
+    throw new ProseError(
+      'BlockLink supports only Unique and Document link types!',
+    );
+}
+</script>
+
+<template>
+  <Block :element>
+    <EruditLink
+      target="_blank"
+      :to="linkStorage.resolvedHref"
+      class="group bg-brand/5 border-brand/20 hocus:bg-brand/10
+        hocus:border-brand/40 relative block rounded-xl border-2 border-dashed
+        p-(--proseAsideWidth) transition-[border,background]"
+    >
+      <EruditIcon
+        name="arrow/outward"
+        class="text-brand/15 group-hocus:text-brand/20 top-small right-small
+          absolute shrink-0 text-[60px]"
+      />
+      <div
+        class="text-brand/80 group-hocus:text-brand mb-small gap-small
+          font-medium transition-[color]"
+      >
+        <EruditIcon
+          :name="uiData!.icon"
+          class="mr-small relative top-0.5 inline align-baseline text-[1.1em]"
+        />
+        <span>{{ formatText(uiData!.text) }}</span>
+      </div>
+      <div class="text-text-muted">
+        {{ formatText(element.data.label) }}
+      </div>
+      <div
+        v-if="uiData!.secondary"
+        class="text-text-dimmed mt-small text-main-xs"
+      >
+        <EruditIcon
+          :name="uiData!.secondary!.icon"
+          class="mr-small relative top-0.5 inline align-baseline"
+        />
+        <span>{{ formatText(uiData!.secondary!.text) }}</span>
+      </div>
+    </EruditLink>
+  </Block>
+</template>