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

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,108 +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>