@erudit-js/prose 4.0.0 → 4.1.0

package/dist/elements/caption/Caption.vue

@@ -1,44 +1,44 @@
-<script lang="ts" setup>
-import { onMounted, useTemplateRef } from 'vue';
-import { isProseElement, type ProseElement } from '@jsprose/core';
-
-import { captionSecondarySchema, type captionSchema } from './core.js';
-import Render from '../../app/shared/Render.vue';
-
-const { caption } = defineProps<{
-  caption: ProseElement<typeof captionSchema>;
-}>();
-
-const emit = defineEmits(['captionMounted']);
-
-const captionElement = useTemplateRef('caption');
-
-const captionSecondary = caption.children.find((child) =>
-  isProseElement(child, captionSecondarySchema),
-);
-const mainInliners = caption.children.filter(
-  (child) => child !== captionSecondary,
-);
-
-const width = caption.data?.width ? `min(${caption.data.width}, 100%)` : '';
-
-onMounted(() => {
-  emit('captionMounted', captionElement.value);
-});
-</script>
-
-<template>
-  <div
-    ref="caption"
-    class="**:text-text-muted text-main-sm mt-small micro:mt-normal m-auto
-      text-center"
-    v-bind="width ? { style: { width } } : {}"
-  >
-    <div class="font-semibold">
-      <Render v-for="child of mainInliners" :element="child" />
-    </div>
-    <div v-if="captionSecondary">
-      <Render v-for="child of captionSecondary.children" :element="child" />
-    </div>
-  </div>
-</template>
+<script lang="ts" setup>
+import { onMounted, useTemplateRef } from 'vue';
+import { isProseElement, type ProseElement } from '@jsprose/core';
+
+import { captionSecondarySchema, type captionSchema } from './core.js';
+import Render from '../../app/shared/Render.vue';
+
+const { caption } = defineProps<{
+  caption: ProseElement<typeof captionSchema>;
+}>();
+
+const emit = defineEmits(['captionMounted']);
+
+const captionElement = useTemplateRef('caption');
+
+const captionSecondary = caption.children.find((child) =>
+  isProseElement(child, captionSecondarySchema),
+);
+const mainInliners = caption.children.filter(
+  (child) => child !== captionSecondary,
+);
+
+const width = caption.data?.width ? `min(${caption.data.width}, 100%)` : '';
+
+onMounted(() => {
+  emit('captionMounted', captionElement.value);
+});
+</script>
+
+<template>
+  <div
+    ref="caption"
+    class="**:text-text-muted text-main-sm mt-small micro:mt-normal m-auto
+      text-center"
+    v-bind="width ? { style: { width } } : {}"
+  >
+    <div class="font-semibold">
+      <Render v-for="child of mainInliners" :element="child" />
+    </div>
+    <div v-if="captionSecondary">
+      <Render v-for="child of captionSecondary.children" :element="child" />
+    </div>
+  </div>
+</template>

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

@@ -1,26 +1,26 @@
-/**
- * Captions are used to provide descriptive text for images, videos, and other media elements.
- * They can contain content (which is treated as the main caption) and an optional secondary caption for additional context.
- *
- * @title Caption
- * @layout inliner
- * @example
- * ```tsx
- * <Image src={triangleA}>
- *   <Caption width="300px">
- *     A right-angled triangle with sides <M>A</M>, <M>B</M> and hypotenuse <M>C</M>.
- *   </Caption>
- * </Image>
- *
- * <Video src={lawOfSines}>
- *   <Caption>
- *     Law of sines explanation.
- *     <CaptionSecondary>
- *       Pay attention to the angle notation!
- *     </CaptionSecondary>
- *   </Caption>
- * </Video>
- * ```
- */
-export const Caption = '_tag_';
-export const CaptionSecondary = '_tag_';
+/**
+ * Captions are used to provide descriptive text for images, videos, and other media elements.
+ * They can contain content (which is treated as the main caption) and an optional secondary caption for additional context.
+ *
+ * @title Caption
+ * @layout inliner
+ * @example
+ * ```tsx
+ * <Image src={triangleA}>
+ *   <Caption width="300px">
+ *     A right-angled triangle with sides <M>A</M>, <M>B</M> and hypotenuse <M>C</M>.
+ *   </Caption>
+ * </Image>
+ *
+ * <Video src={lawOfSines}>
+ *   <Caption>
+ *     Law of sines explanation.
+ *     <CaptionSecondary>
+ *       Pay attention to the angle notation!
+ *     </CaptionSecondary>
+ *   </Caption>
+ * </Video>
+ * ```
+ */
+export const Caption = '_tag_';
+export const CaptionSecondary = '_tag_';

package/dist/elements/details/Details.vue

@@ -1,49 +1,49 @@
-<script lang="ts" setup>
-import type { ProseElement } from '@jsprose/core';
-
-import type { detailsSchema } from './core.js';
-import { useFormatText } from '../../app/composables/formatText.js';
-import { useProseContext } from '../../app/composables/context.js';
-import {
-  useIsAnchor,
-  useContainsAnchor,
-} from '../../app/composables/anchor.js';
-import { useElementIcon } from '../../app/composables/elementIcon.js';
-import { useElementPhrase } from '../../app/composables/language.js';
-import Block from '../../app/shared/block/Block.vue';
-import Render from '../../app/shared/Render.vue';
-
-const { element } = defineProps<{
-  element: ProseElement<typeof detailsSchema>;
-}>();
-
-const { EruditIcon } = useProseContext();
-const formatText = useFormatText();
-const icon = await useElementIcon(element);
-const phrase = await useElementPhrase(element);
-const { mode } = useProseContext();
-const isAnchor = useIsAnchor(element);
-const containsAnchor = useContainsAnchor(element);
-</script>
-
-<template>
-  <Block :element v-if="isAnchor || containsAnchor || mode !== 'static'">
-    <div
-      class="border-border bg-bg-accent/30 rounded-xl border-2 border-dashed
-        dark:border-white/30 dark:bg-white/5"
-    >
-      <div class="text-text-muted p-(--proseAsideWidth) font-medium">
-        <EruditIcon
-          :name="icon"
-          class="text-main-sm mr-small relative top-0.5 inline align-baseline"
-        />
-        <span>
-          {{ formatText(element.data.title || phrase.element_name) }}
-        </span>
-      </div>
-      <div class="pb-(--proseAsideWidth)">
-        <Render v-for="child in element.children" :element="child" />
-      </div>
-    </div>
-  </Block>
-</template>
+<script lang="ts" setup>
+import type { ProseElement } from '@jsprose/core';
+
+import type { detailsSchema } from './core.js';
+import { useFormatText } from '../../app/composables/formatText.js';
+import { useProseContext } from '../../app/composables/context.js';
+import {
+  useIsAnchor,
+  useContainsAnchor,
+} from '../../app/composables/anchor.js';
+import { useElementIcon } from '../../app/composables/elementIcon.js';
+import { useElementPhrase } from '../../app/composables/language.js';
+import Block from '../../app/shared/block/Block.vue';
+import Render from '../../app/shared/Render.vue';
+
+const { element } = defineProps<{
+  element: ProseElement<typeof detailsSchema>;
+}>();
+
+const { EruditIcon } = useProseContext();
+const formatText = useFormatText();
+const icon = await useElementIcon(element);
+const phrase = await useElementPhrase(element);
+const { mode } = useProseContext();
+const isAnchor = useIsAnchor(element);
+const containsAnchor = useContainsAnchor(element);
+</script>
+
+<template>
+  <Block :element v-if="isAnchor || containsAnchor || mode !== 'static'">
+    <div
+      class="border-border bg-bg-accent/30 rounded-xl border-2 border-dashed
+        dark:border-white/30 dark:bg-white/5"
+    >
+      <div class="text-text-muted p-(--proseAsideWidth) font-medium">
+        <EruditIcon
+          :name="icon"
+          class="text-main-sm mr-small relative top-0.5 inline align-baseline"
+        />
+        <span>
+          {{ formatText(element.data.title || phrase.element_name) }}
+        </span>
+      </div>
+      <div class="pb-(--proseAsideWidth)">
+        <Render v-for="child in element.children" :element="child" />
+      </div>
+    </div>
+  </Block>
+</template>

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

@@ -1,27 +1,27 @@
-/**
- * Details are used to hide additional explanations or secondary content.
- * Default title "Details" can be changed via `title` prop.
- *
- * Clicking on a link to the details block will show it in preview area.
- * That is why **all** details blocks **have to be unique elements**!
- * You can not create details block without unique attached to it.
- *
- * Opening a link to the details block in new tab will make it visible inside main prose content.
- * Because of this you should place them near the link pointing to them to keep context.
- *
- * Details blocks can't be added to Table of Contents and can't have snippets.
- *
- * @title Details
- * @layout block
- * @example
- * ```tsx
- * <P>
- *   The number 4 is even, which is <A to={{uniques.whyEven}}>obvious</A>.
- * </P>
- *
- * <Details $={{uniques.whyEven}} title="Why is 4 even?">
- *   <P>Because it is divisible by 2 without a remainder.</P>
- * </Details>
- * ```
- */
-export const Details = '_tag_';
+/**
+ * Details are used to hide additional explanations or secondary content.
+ * Default title "Details" can be changed via `title` prop.
+ *
+ * Clicking on a link to the details block will show it in preview area.
+ * That is why **all** details blocks **have to be unique elements**!
+ * You can not create details block without unique attached to it.
+ *
+ * Opening a link to the details block in new tab will make it visible inside main prose content.
+ * Because of this you should place them near the link pointing to them to keep context.
+ *
+ * Details blocks can't be added to Table of Contents and can't have snippets.
+ *
+ * @title Details
+ * @layout block
+ * @example
+ * ```tsx
+ * <P>
+ *   The number 4 is even, which is <A to={{uniques.whyEven}}>obvious</A>.
+ * </P>
+ *
+ * <Details $={{uniques.whyEven}} title="Why is 4 even?">
+ *   <P>Because it is divisible by 2 without a remainder.</P>
+ * </Details>
+ * ```
+ */
+export const Details = '_tag_';

package/dist/elements/details/icon.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34">
-  <path d="M30.3,11.3c-.56-.56-1.52-.56-2.08,0l-1.92,2c-1.04-.96-2.32-1.92-3.85-2.56l.8-2.72c.24-.8-.16-1.68-.96-1.92-.8-.24-1.6.24-1.84,1.04l-.8,2.72c-1.6-.32-3.53-.32-5.13,0l-.8-2.72c-.24-.8-1.04-1.28-1.84-1.04s-1.2,1.12-.96,1.92l.8,2.72c-1.52.72-2.8,1.6-3.85,2.56l-1.92-2c-.56-.56-1.52-.56-2.08,0-.56.56-.56,1.52,0,2.16l2,2.16c-1.12,1.52-1.6,2.8-1.6,3.21,0,1.04,4.09,9.14,12.74,9.14s12.74-8.09,12.74-9.14-.56-1.68-1.6-3.21l2-2.16c.56-.56.56-1.52,0-2.16h.16ZM17.08,24.92c-5.85,0-8.82-4.57-9.7-6.09.64-1.2,2.72-4.33,6.41-5.61h.24c.88-.24,1.92-.4,3.05-.4s2.08.16,3.05.4h.24c3.77,1.2,5.77,4.33,6.41,5.61-.88,1.52-3.85,6.09-9.7,6.09ZM18.2,13.95c-2.56-.64-5.13.96-5.77,3.77-.64,2.64.96,5.37,3.53,6.01.4.08.72.16,1.12.16.88,0,1.68-.24,2.48-.72,1.12-.72,1.84-1.76,2.16-3.05v-.08c.32-1.28.08-2.64-.56-3.77-.64-1.12-1.68-1.92-2.97-2.24v-.08ZM18.84,19.31c-.08.48-.4.96-.8,1.2s-.88.32-1.36.24c-.96-.24-1.6-1.28-1.36-2.4.24-.88.96-1.44,1.76-1.44s.32,0,.4,0h0c.48.16.88.4,1.12.88.24.4.32.96.16,1.52h.08Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34">
+  <path d="M30.3,11.3c-.56-.56-1.52-.56-2.08,0l-1.92,2c-1.04-.96-2.32-1.92-3.85-2.56l.8-2.72c.24-.8-.16-1.68-.96-1.92-.8-.24-1.6.24-1.84,1.04l-.8,2.72c-1.6-.32-3.53-.32-5.13,0l-.8-2.72c-.24-.8-1.04-1.28-1.84-1.04s-1.2,1.12-.96,1.92l.8,2.72c-1.52.72-2.8,1.6-3.85,2.56l-1.92-2c-.56-.56-1.52-.56-2.08,0-.56.56-.56,1.52,0,2.16l2,2.16c-1.12,1.52-1.6,2.8-1.6,3.21,0,1.04,4.09,9.14,12.74,9.14s12.74-8.09,12.74-9.14-.56-1.68-1.6-3.21l2-2.16c.56-.56.56-1.52,0-2.16h.16ZM17.08,24.92c-5.85,0-8.82-4.57-9.7-6.09.64-1.2,2.72-4.33,6.41-5.61h.24c.88-.24,1.92-.4,3.05-.4s2.08.16,3.05.4h.24c3.77,1.2,5.77,4.33,6.41,5.61-.88,1.52-3.85,6.09-9.7,6.09ZM18.2,13.95c-2.56-.64-5.13.96-5.77,3.77-.64,2.64.96,5.37,3.53,6.01.4.08.72.16,1.12.16.88,0,1.68-.24,2.48-.72,1.12-.72,1.84-1.76,2.16-3.05v-.08c.32-1.28.08-2.64-.56-3.77-.64-1.12-1.68-1.92-2.97-2.24v-.08ZM18.84,19.31c-.08.48-.4.96-.8,1.2s-.88.32-1.36.24c-.96-.24-1.6-1.28-1.36-2.4.24-.88.96-1.44,1.76-1.44s.32,0,.4,0h0c.48.16.88.4,1.12.88.24.4.32.96.16,1.52h.08Z"/>
 </svg>