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

package/dist/elements/link/Link.vue

@@ -1,96 +1,92 @@
-<script lang="ts" setup>
-import type { ProseElement } from '@jsprose/core';
-
-import type { depSchema } from './dependency/core.js';
-import type { refSchema } from './reference/core.js';
-import type { LinkStorage } from './storage.js';
-import { useProseContext } from '../../app/composables/context.js';
-import { useFormatText } from '../../app/composables/formatText.js';
-import { useElementStorage } from '../../app/composables/storage.js';
-import { useElementIcon } from '../../app/composables/elementIcon.js';
-import Inliner from '../../app/shared/inliner/Inliner.vue';
-
-const { element } = defineProps<{
-    element: ProseElement<typeof refSchema> | ProseElement<typeof depSchema>;
-}>();
-
-const {
-    EruditIcon,
-    EruditLink,
-    eruditIcons,
-    setPreview,
-    closePreview,
-    baseUrl,
-} = useProseContext();
-const formatText = useFormatText();
-const linkStorage = (await useElementStorage(element as any)) as LinkStorage;
-
-const icon = await (async () => {
-    switch (linkStorage.type) {
-        case 'direct':
-            return 'arrow/outward-box';
-        case 'contentItem':
-            return eruditIcons[
-                linkStorage.content.contentType === 'topic'
-                    ? linkStorage.content.topicPart
-                    : linkStorage.content.contentType
-            ];
-        case 'unique':
-            return await useElementIcon(linkStorage.schemaName);
-    }
-})();
-
-const doubleClick = {
-    timeout: undefined as ReturnType<typeof setTimeout> | undefined,
-    startTimeout() {
-        this.timeout = setTimeout(() => {
-            this.reset();
-        }, 400);
-    },
-    reset() {
-        clearTimeout(this.timeout);
-        this.timeout = undefined;
-    },
-};
-
-function linkClick() {
-    if (doubleClick.timeout) {
-        doubleClick.reset();
-        closePreview();
-        const openUrl =
-            linkStorage.type === 'direct'
-                ? linkStorage.resolvedHref
-                : baseUrl + linkStorage.resolvedHref.slice(1);
-        window.open(openUrl, '_blank');
-        return false;
-    }
-
-    setPreview(linkStorage.previewRequest);
-    doubleClick.startTimeout();
-    return false;
-}
-</script>
-
-<template>
-    <Inliner :element>
-        <EruditLink
-            @click.capture.prevent="linkClick"
-            :to="linkStorage.resolvedHref"
-            :style="{ '--tGap': '1px', '--xGap': '4px', '--bGap': '4px' }"
-            class="text-brand hocus:bg-brand/15 relative
-                -mx-[calc(var(--xGap)-3px)] -mt-(--tGap) -mb-(--bGap) rounded-sm
-                bg-transparent px-(--xGap) pt-(--tGap) pb-(--bGap)
-                whitespace-nowrap underline
-                decoration-[color-mix(in_srgb,var(--color-brand)30%,transparent)]
-                decoration-2 underline-offset-2 transition-[background]"
-        >
-            <EruditIcon
-                :name="icon"
-                class="micro:pr-1.5 inline pr-1 text-[1.3em]"
-            />
-            <span class="whitespace-normal">
-                {{ formatText(element.data.label) }}
-            </span>
-        </EruditLink>
-    </Inliner>
-</template>
+<script lang="ts" setup>
+import type { ProseElement } from '@jsprose/core';
+
+import type { depSchema } from './dependency/core.js';
+import type { refSchema } from './reference/core.js';
+import type { LinkStorage } from './storage.js';
+import { useProseContext } from '../../app/composables/context.js';
+import { useFormatText } from '../../app/composables/formatText.js';
+import { useElementStorage } from '../../app/composables/storage.js';
+import { useElementIcon } from '../../app/composables/elementIcon.js';
+import Inliner from '../../app/shared/inliner/Inliner.vue';
+
+const { element } = defineProps<{
+  element: ProseElement<typeof refSchema> | ProseElement<typeof depSchema>;
+}>();
+
+const {
+  EruditIcon,
+  EruditLink,
+  eruditIcons,
+  setPreview,
+  closePreview,
+  baseUrl,
+} = useProseContext();
+const formatText = useFormatText();
+const linkStorage = (await useElementStorage(element as any)) as LinkStorage;
+
+const icon = await (async () => {
+  switch (linkStorage.type) {
+    case 'direct':
+      return 'arrow/outward-box';
+    case 'contentItem':
+      return eruditIcons[
+        linkStorage.content.contentType === 'topic'
+          ? linkStorage.content.topicPart
+          : linkStorage.content.contentType
+      ];
+    case 'unique':
+      return await useElementIcon(linkStorage.schemaName);
+  }
+})();
+
+const doubleClick = {
+  timeout: undefined as ReturnType<typeof setTimeout> | undefined,
+  startTimeout() {
+    this.timeout = setTimeout(() => {
+      this.reset();
+    }, 400);
+  },
+  reset() {
+    clearTimeout(this.timeout);
+    this.timeout = undefined;
+  },
+};
+
+function linkClick() {
+  if (doubleClick.timeout) {
+    doubleClick.reset();
+    closePreview();
+    const openUrl =
+      linkStorage.type === 'direct'
+        ? linkStorage.resolvedHref
+        : baseUrl + linkStorage.resolvedHref.slice(1);
+    window.open(openUrl, '_blank');
+    return false;
+  }
+
+  setPreview(linkStorage.previewRequest);
+  doubleClick.startTimeout();
+  return false;
+}
+</script>
+
+<template>
+  <Inliner :element>
+    <EruditLink
+      @click.capture.prevent="linkClick"
+      :to="linkStorage.resolvedHref"
+      :style="{ '--tGap': '1px', '--xGap': '4px', '--bGap': '4px' }"
+      class="text-brand hocus:bg-brand/15 relative -mx-[calc(var(--xGap)-3px)]
+        -mt-(--tGap) -mb-(--bGap) rounded-sm bg-transparent px-(--xGap)
+        pt-(--tGap) pb-(--bGap) whitespace-nowrap underline
+        decoration-[color-mix(in_srgb,var(--color-brand)30%,transparent)]
+        decoration-2 underline-offset-2 transition-[background]"
+    >
+      <EruditIcon :name="icon" class="micro:pr-1.5 inline pr-1 text-[1.3em]" />
+      <span class="whitespace-normal">
+        {{ formatText(element.data.label) }}
+      </span>
+    </EruditLink>
+  </Inliner>
+</template>

package/dist/elements/link/dependency/_global.d.ts

@@ -1,47 +1,47 @@
-/**
- * Dependencies are used to reference content the reader **must know and understand** in order to proceed further.
- *
- * Never use dependencies to simply mention other content; for that, use `<Ref>` and `<Reference>` tags.
- *
- * Dependency types:
- * * Global Content — points to content items and uniques via `$CONTENT` global object.
- * * Unique — points to a unique element directly.
- *
- * @title Inliner Dependency
- * @layout inliner
- * @example
- * ```tsx
- * // Global content dependency
- * <P>
- *   We need to use <Dep to={$CONTENT.combinatorics.sumRule}>Rule of Sum</Dep> to calculate the answer.
- * </P>
- *
- * // Link to uniques directly
- * <P $={uniques.intro}>Intro Paragraph</P>
- * <P>
- *   We need to use <Dep to={uniques.intro}>introduction</Dep> to understand this transform.
- * </P>
- * ```
- */
-export const Dep = '_tag_';
-
-/**
- * Same as `<Dep>`, but as a block element which draws more attention.
- *
- * @title Block Dependency
- * @layout block
- * @example
- * ```tsx
- * // Global content dependency
- * <Dependency to={$CONTENT.combinatorics.sumRule}>
- *   To proceed, you must understand the Rule of Sum in combinatorics.
- * </Dependency>
- *
- * // Link to uniques directly
- * <P $={uniques.intro}>Intro Paragraph</P>
- * <Dependency to={uniques.intro}>
- *   To proceed, you must read the introduction.
- * </Dependency>
- * ```
- */
-export const Dependency = '_tag_';
+/**
+ * Dependencies are used to reference content the reader **must know and understand** in order to proceed further.
+ *
+ * Never use dependencies to simply mention other content; for that, use `<Ref>` and `<Reference>` tags.
+ *
+ * Dependency types:
+ * * Global Content — points to content items and uniques via `$CONTENT` global object.
+ * * Unique — points to a unique element directly.
+ *
+ * @title Inliner Dependency
+ * @layout inliner
+ * @example
+ * ```tsx
+ * // Global content dependency
+ * <P>
+ *   We need to use <Dep to={$CONTENT.combinatorics.sumRule}>Rule of Sum</Dep> to calculate the answer.
+ * </P>
+ *
+ * // Link to uniques directly
+ * <P $={uniques.intro}>Intro Paragraph</P>
+ * <P>
+ *   We need to use <Dep to={uniques.intro}>introduction</Dep> to understand this transform.
+ * </P>
+ * ```
+ */
+export const Dep = '_tag_';
+
+/**
+ * Same as `<Dep>`, but as a block element which draws more attention.
+ *
+ * @title Block Dependency
+ * @layout block
+ * @example
+ * ```tsx
+ * // Global content dependency
+ * <Dependency to={$CONTENT.combinatorics.sumRule}>
+ *   To proceed, you must understand the Rule of Sum in combinatorics.
+ * </Dependency>
+ *
+ * // Link to uniques directly
+ * <P $={uniques.intro}>Intro Paragraph</P>
+ * <Dependency to={uniques.intro}>
+ *   To proceed, you must read the introduction.
+ * </Dependency>
+ * ```
+ */
+export const Dependency = '_tag_';

package/dist/elements/link/reference/_global.d.ts

@@ -1,49 +1,49 @@
-/**
- * References are used to simply mention, **not requiring knowledge of** other content inside or outside site.
- *
- * Reference types:
- * * Global Content — points to content items and uniques via `$CONTENT` global object.
- * * Unique — points to a unique element directly.
- * * Direct — points to an external URL (when possible, avoid using of these).
- *
- * @title Inliner Reference
- * @layout inliner
- * @example
- * ```tsx
- * // Global content reference
- * <P>
- *   The method we used here is somewhat similar to <Ref to={$CONTENT.combinatorics.sumRule}>Rule of Sum</Ref> in combinatorics.
- * </P>
- *
- * // Link to uniques directly
- * <P $={uniques.intro}>Intro Paragraph</P>
- * <P>
- *   If you remember, we also did this transform back in the <Ref to={uniques.intro}>introduction</Ref>.
- * </P>
- *
- * // Direct reference
- * <Ref to="https://google.com">Just Google It!</Ref>
- * ```
- */
-export const Ref = '_tag_';
-
-/**
- * Same as `<Ref>`, but as a block element which draws more attention.
- *
- * @title Block Reference
- * @layout block
- * @example
- * ```tsx
- * // Global content reference
- * <Reference to={$CONTENT.combinatorics.sumRule}>
- *   There is a similar method called Rule of Sum in combinatorics which you might want to review.
- * </Reference>
- *
- * // Link to uniques directly
- * <P $={uniques.intro}>Intro Paragraph</P>
- * <Reference to={uniques.intro}>
- *   If you remember, we also did this transform back in the introduction.
- * </Reference>
- * ```
- */
-export const Reference = '_tag_';
+/**
+ * References are used to simply mention, **not requiring knowledge of** other content inside or outside site.
+ *
+ * Reference types:
+ * * Global Content — points to content items and uniques via `$CONTENT` global object.
+ * * Unique — points to a unique element directly.
+ * * Direct — points to an external URL (when possible, avoid using of these).
+ *
+ * @title Inliner Reference
+ * @layout inliner
+ * @example
+ * ```tsx
+ * // Global content reference
+ * <P>
+ *   The method we used here is somewhat similar to <Ref to={$CONTENT.combinatorics.sumRule}>Rule of Sum</Ref> in combinatorics.
+ * </P>
+ *
+ * // Link to uniques directly
+ * <P $={uniques.intro}>Intro Paragraph</P>
+ * <P>
+ *   If you remember, we also did this transform back in the <Ref to={uniques.intro}>introduction</Ref>.
+ * </P>
+ *
+ * // Direct reference
+ * <Ref to="https://google.com">Just Google It!</Ref>
+ * ```
+ */
+export const Ref = '_tag_';
+
+/**
+ * Same as `<Ref>`, but as a block element which draws more attention.
+ *
+ * @title Block Reference
+ * @layout block
+ * @example
+ * ```tsx
+ * // Global content reference
+ * <Reference to={$CONTENT.combinatorics.sumRule}>
+ *   There is a similar method called Rule of Sum in combinatorics which you might want to review.
+ * </Reference>
+ *
+ * // Link to uniques directly
+ * <P $={uniques.intro}>Intro Paragraph</P>
+ * <Reference to={uniques.intro}>
+ *   If you remember, we also did this transform back in the introduction.
+ * </Reference>
+ * ```
+ */
+export const Reference = '_tag_';

package/dist/elements/list/List.vue

@@ -1,65 +1,58 @@
-<script lang="ts" setup>
-import type { ProseElement } from '@jsprose/core';
-
-import { listSchema } from './core.js';
-import Render from '../../app/shared/Render.vue';
-import Block from '../../app/shared/block/Block.vue';
-
-defineProps<{ element: ProseElement<typeof listSchema> }>();
-</script>
-
-<template>
-    <Block :element>
-        <component
-            :is="element.data.type"
-            class="micro:[--proseGap:18px]"
-            :style="{
-                '--liBorder': 'var(--color-text-disabled)',
-                '--liBackground':
-                    'color-mix(in hsl, var(--accentText, var(--color-text)) 12%, var(--color-bg-main))',
-                '--liText': 'var(--accentText, var(--color-text-muted))',
-            }"
-            v-bind="
-                element.data.type === 'ol'
-                    ? { start: element.data.start ?? 1 }
-                    : {}
-            "
-        >
-            <li
-                v-for="(listItem, i) of element.children"
-                class="relative flex not-last-of-type:mb-(--proseGap)"
-            >
-                <div
-                    class="micro:left-[11px] bg-text-disabled micro:w-[2px]
-                        absolute top-[3px] bottom-[5px] left-[9px] w-[1px]"
-                ></div>
-                <div class="relative shrink-0">
-                    <div
-                        class="micro:top-[1.5px] micro:size-[23px] relative
-                            top-[3px] flex size-[20px] items-center
-                            justify-center rounded-full border
-                            border-(--liBorder) bg-(--liBackground)
-                            font-semibold text-(--liText)"
-                    >
-                        <template v-if="element.data.type === 'ol'">
-                            <div class="micro:text-[13px] text-[10px]">
-                                {{ i + (element.data.start ?? 0) }}
-                            </div>
-                        </template>
-                        <template v-else>
-                            <div
-                                class="size-1.5 rounded-full bg-(--liText)"
-                            ></div>
-                        </template>
-                    </div>
-                </div>
-                <div class="flex-1">
-                    <Render
-                        v-for="liItem of listItem.children"
-                        :element="liItem"
-                    />
-                </div>
-            </li>
-        </component>
-    </Block>
-</template>
+<script lang="ts" setup>
+import type { ProseElement } from '@jsprose/core';
+
+import { listSchema } from './core.js';
+import Render from '../../app/shared/Render.vue';
+import Block from '../../app/shared/block/Block.vue';
+
+defineProps<{ element: ProseElement<typeof listSchema> }>();
+</script>
+
+<template>
+  <Block :element>
+    <component
+      :is="element.data.type"
+      class="micro:[--proseGap:18px]"
+      :style="{
+        '--liBorder':
+          'color-mix(in hsl, var(--accentText, var(--color-text-muted)) 50%, var(--color-bg-main))',
+        '--liBackground':
+          'color-mix(in hsl, var(--accentBackground, var(--color-text-disabled)) 40%, var(--color-bg-main))',
+        '--liText': 'var(--accentText, var(--color-text-muted))',
+      }"
+      v-bind="
+        element.data.type === 'ol' ? { start: element.data.start ?? 1 } : {}
+      "
+    >
+      <li
+        v-for="(listItem, i) of element.children"
+        class="relative flex not-last-of-type:mb-(--proseGap)"
+      >
+        <div
+          class="micro:left-[11px] micro:w-[2px] absolute top-[3px] bottom-[5px]
+            left-[9px] w-[1px] bg-(--liBorder)"
+        ></div>
+        <div class="relative shrink-0">
+          <div
+            class="micro:top-[1.5px] micro:size-[23px] relative top-[3px] flex
+              size-[20px] items-center justify-center rounded-full border
+              border-(--liBorder) bg-(--liBackground) font-semibold
+              text-(--liText)"
+          >
+            <template v-if="element.data.type === 'ol'">
+              <div class="micro:text-[13px] text-[10px]">
+                {{ i + (element.data.start ?? 0) }}
+              </div>
+            </template>
+            <template v-else>
+              <div class="size-1.5 rounded-full bg-(--liText)"></div>
+            </template>
+          </div>
+        </div>
+        <div class="flex-1">
+          <Render v-for="liItem of listItem.children" :element="liItem" />
+        </div>
+      </li>
+    </component>
+  </Block>
+</template>

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

@@ -1,50 +1,50 @@
-/**
- * Lists can be either ordered (numbered) or unordered (bulleted).
- * Ordered lists support a `start` attribute to specify the starting number.
- *
- * Each list must contain only `<Li>` (list item) elements as children.
- * List items can contain inliners or blocks.
- *
- * @title List
- * @layout block
- * @example
- * ```tsx
- * <List type="ul">
- *   <Li>First unordered item</Li>
- *   <Li>
- *     <P>Second unordered item with paragraph inside</P>
- *     <P>Another paragraph in the same item</P>
- *   </Li>
- * </List>
- *
- * <List type="ol">
- *   <Li>First ordered item (numbered 1)</Li>
- * </List>
- *
- * <List type="ol" start={3}>
- *   <Li>Third ordered item (numbered 3)</Li>
- *   <Li>Fourth ordered item (numbered 4)</Li>
- * </List>
- * ```
- */
-export const List = '_tag_';
-
-/**
- * List item element.
- * Must be used only inside `<List>` elements.
- *
- * Can contain inliners or blocks as children.
- *
- * @title List Item
- * @layout block
- * @example
- * ```tsx
- * <Li>Simple list item with inliners</Li>
- *
- * <Li>
- *   <P>List item with a paragraph inside</P>
- *   <P>Another paragraph in the same item</P>
- * </Li>
- * ```
- */
-export const Li = '_tag_';
+/**
+ * Lists can be either ordered (numbered) or unordered (bulleted).
+ * Ordered lists support a `start` attribute to specify the starting number.
+ *
+ * Each list must contain only `<Li>` (list item) elements as children.
+ * List items can contain inliners or blocks.
+ *
+ * @title List
+ * @layout block
+ * @example
+ * ```tsx
+ * <List type="ul">
+ *   <Li>First unordered item</Li>
+ *   <Li>
+ *     <P>Second unordered item with paragraph inside</P>
+ *     <P>Another paragraph in the same item</P>
+ *   </Li>
+ * </List>
+ *
+ * <List type="ol">
+ *   <Li>First ordered item (numbered 1)</Li>
+ * </List>
+ *
+ * <List type="ol" start={3}>
+ *   <Li>Third ordered item (numbered 3)</Li>
+ *   <Li>Fourth ordered item (numbered 4)</Li>
+ * </List>
+ * ```
+ */
+export const List = '_tag_';
+
+/**
+ * List item element.
+ * Must be used only inside `<List>` elements.
+ *
+ * Can contain inliners or blocks as children.
+ *
+ * @title List Item
+ * @layout block
+ * @example
+ * ```tsx
+ * <Li>Simple list item with inliners</Li>
+ *
+ * <Li>
+ *   <P>List item with a paragraph inside</P>
+ *   <P>Another paragraph in the same item</P>
+ * </Li>
+ * ```
+ */
+export const Li = '_tag_';