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

package/dist/elements/caption/Caption.vue

@@ -1,47 +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,50 +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_';