@erudit-js/prose 3.0.0-dev.25

package/dist/elements/accent/AccentRowSections.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import { ref, watchEffect } from 'vue';
+import type { ProseElement } from '@jsprose/core';
+
+import type { AccentSectionSchema } from './core.js';
+import { useArrayContainsAnchor } from '../../app/composables/anchor.js';
+import Render from '../../app/shared/Render.vue';
+
+const { sections } = defineProps<{
+    sectionTitles: string[];
+    sections: ProseElement<AccentSectionSchema>[];
+}>();
+
+const openedSectionI = ref<number>();
+const containsAnchorI = useArrayContainsAnchor(sections);
+
+watchEffect(() => {
+    if (containsAnchorI.value !== undefined) {
+        openedSectionI.value = containsAnchorI.value;
+    }
+});
+</script>
+
+<template>
+    <div
+        :class="[
+            `relative flex flex-wrap items-center gap-(--proseAsideWidth)
+            p-(--proseAsideWidth) pt-0`,
+        ]"
+    >
+        <button
+            v-for="(_section, i) of sections"
+            @click="openedSectionI = i === openedSectionI ? undefined : i"
+            :class="[
+                `text-main-sm micro:py-2 micro:px-2.5 cursor-pointer rounded-xl
+                px-2 py-1.5 font-medium transition-[color,background]`,
+                i === openedSectionI
+                    ? 'bg-(--accentText)/80 text-white'
+                    : `hocus:bg-(--accentText)/30 bg-(--accentText)/15
+                        text-(--accentText)`,
+            ]"
+        >
+            {{ sectionTitles[i] }}
+        </button>
+        <div
+            :class="[
+                `absolute bottom-0 left-0 w-full border-b
+                border-(--accentBorder) transition-[border]`,
+                openedSectionI === undefined ? 'opacity-0' : 'opacity-100',
+            ]"
+        ></div>
+    </div>
+    <Suspense>
+        <div
+            v-if="openedSectionI !== undefined"
+            :key="openedSectionI"
+            class="py-(--proseAsideWidth)"
+        >
+            <Render
+                v-for="child of sections[openedSectionI].children"
+                :element="child"
+            />
+        </div>
+    </Suspense>
+</template>

package/dist/elements/accent/app.d.ts

@@ -0,0 +1,21 @@
+import { type AppElement, type AppElementDefinition } from '../../app/appElement.js';
+import type { ElementLanguagesRaw, ElementPhrases } from '../../app/language/element.js';
+import type { AccentSchema } from './core.js';
+export interface AccentAppOptions {
+    colors: {
+        text: string;
+        background: string;
+        border: string;
+    };
+}
+export declare function accentSectionNamePhrase<TSectionName extends string>(sectionName: TSectionName): `section_title_${TSectionName}`;
+export type AccentAppDefinition<TAccentSchema extends AccentSchema> = Omit<AppElementDefinition<TAccentSchema>, 'component' | 'createStorage'> & {
+    schema: TAccentSchema;
+    accent: AccentAppOptions;
+    languages: ElementLanguagesRaw<ElementPhrases<{
+        [K in ReturnType<typeof accentSectionNamePhrase<TAccentSchema['SectionNames'][number]>>]: string;
+    }>>;
+};
+export declare function defineAccentApp<TAccentSchema extends AccentSchema>(accentApp: AccentAppDefinition<TAccentSchema>): AppElement<TAccentSchema> & {
+    accent: AccentAppOptions;
+};

package/dist/elements/accent/app.js

@@ -0,0 +1,16 @@
+import { defineEruditProseAppElement } from "../../app/appElement.js";
+export function accentSectionNamePhrase(sectionName) {
+	return `section_title_${sectionName}`;
+}
+export function defineAccentApp(accentApp) {
+	const appElement = defineEruditProseAppElement({
+		schema: accentApp.schema,
+		component: () => import("./Accent.vue"),
+		icon: accentApp.icon,
+		languages: accentApp.languages
+	});
+	return {
+		...appElement,
+		accent: accentApp.accent
+	};
+}

package/dist/elements/accent/core.d.ts

@@ -0,0 +1,340 @@
+import { type AnySchema, type BlockSchema, type ProseElement, type TagChildren } from '@jsprose/core';
+import { type UppercaseFirst } from '../../utils/case.js';
+export interface AccentDefinition<TName extends string, TSectionNames extends readonly string[]> {
+    name: TName;
+    sectionNames: TSectionNames;
+}
+export type AccentMainSchema = Omit<BlockSchema, 'Data' | 'linkable'> & {
+    linkable: false;
+    Data: undefined;
+};
+export type AccentSectionSchema = Omit<BlockSchema, 'Data' | 'linkable'> & {
+    linkable: false;
+    Data: {
+        type: 'named';
+        name: string;
+    } | {
+        type: 'manual';
+        title: string;
+    };
+};
+export type AccentSchema = Omit<BlockSchema, 'Data' | 'Children' | 'linkable'> & {
+    linkable: true;
+    Data: {
+        title: string;
+        layout: 'column' | 'row';
+    };
+    Children: (AccentMainSchema | AccentSectionSchema)[];
+    SectionNames: string[];
+};
+export declare function isAccentElement(element: ProseElement<AnySchema>): element is ProseElement<AccentSchema>;
+export declare function isAccentMainElement(element: ProseElement<AnySchema>): element is ProseElement<AccentMainSchema>;
+export declare function isAccentSectionElement(element: ProseElement<AnySchema>): element is ProseElement<AccentSectionSchema>;
+export declare function defineAccentCore<const I extends string, const J extends string[], const TDefinition extends AccentDefinition<I, J>>(definition: TDefinition): {
+    _sectionNames: TDefinition["sectionNames"];
+    accent: {
+        schema: {
+            name: `accent_${TDefinition["name"]}`;
+            type: "block";
+            linkable: true;
+            Data: {
+                title: string;
+                layout: "column" | "row";
+            };
+            Storage: undefined;
+            Children: [{
+                name: `accentMain_${TDefinition["name"]}`;
+                type: "block";
+                linkable: false;
+                Data: undefined;
+                Storage: undefined;
+                Children: AnySchema[];
+            }, ...{
+                name: `accentSection_${TDefinition["name"]}`;
+                type: "block";
+                linkable: false;
+                Data: {
+                    type: "named";
+                    name: string;
+                } | {
+                    type: "manual";
+                    title: string;
+                };
+                Storage: undefined;
+                Children: AnySchema[];
+            }[]];
+        } & {
+            SectionNames: TDefinition["sectionNames"];
+        };
+        tag: import("@jsprose/core").Tag<`${UppercaseFirst<TDefinition["name"]>}`, {
+            name: `accent_${TDefinition["name"]}`;
+            type: "block";
+            linkable: true;
+            Data: {
+                title: string;
+                layout: "column" | "row";
+            };
+            Storage: undefined;
+            Children: [{
+                name: `accentMain_${TDefinition["name"]}`;
+                type: "block";
+                linkable: false;
+                Data: undefined;
+                Storage: undefined;
+                Children: AnySchema[];
+            }, ...{
+                name: `accentSection_${TDefinition["name"]}`;
+                type: "block";
+                linkable: false;
+                Data: {
+                    type: "named";
+                    name: string;
+                } | {
+                    type: "manual";
+                    title: string;
+                };
+                Storage: undefined;
+                Children: AnySchema[];
+            }[]];
+        } & {
+            SectionNames: TDefinition["sectionNames"];
+        }, ({
+            title: string;
+        } & (({
+            row?: true;
+            column?: undefined;
+        } | {
+            row?: undefined;
+            column?: true;
+        }) & TagChildren)) & import("../../toc.js").ObjPropToc & import("../../snippet.js").ObjPropSnippet & import("../../snippet.js").ObjPropSearch & import("../../snippet.js").ObjPropQuick & import("../../snippet.js").ObjPropSeo>;
+        registryItem: import("@jsprose/core").RegistryItem<{
+            name: `accent_${TDefinition["name"]}`;
+            type: "block";
+            linkable: true;
+            Data: {
+                title: string;
+                layout: "column" | "row";
+            };
+            Storage: undefined;
+            Children: [{
+                name: `accentMain_${TDefinition["name"]}`;
+                type: "block";
+                linkable: false;
+                Data: undefined;
+                Storage: undefined;
+                Children: AnySchema[];
+            }, ...{
+                name: `accentSection_${TDefinition["name"]}`;
+                type: "block";
+                linkable: false;
+                Data: {
+                    type: "named";
+                    name: string;
+                } | {
+                    type: "manual";
+                    title: string;
+                };
+                Storage: undefined;
+                Children: AnySchema[];
+            }[]];
+        } & {
+            SectionNames: TDefinition["sectionNames"];
+        }, { [K in `${UppercaseFirst<TDefinition["name"]>}`]: Extract<import("@jsprose/core").Tag<`${UppercaseFirst<TDefinition["name"]>}`, {
+            name: `accent_${TDefinition["name"]}`;
+            type: "block";
+            linkable: true;
+            Data: {
+                title: string;
+                layout: "column" | "row";
+            };
+            Storage: undefined;
+            Children: [{
+                name: `accentMain_${TDefinition["name"]}`;
+                type: "block";
+                linkable: false;
+                Data: undefined;
+                Storage: undefined;
+                Children: AnySchema[];
+            }, ...{
+                name: `accentSection_${TDefinition["name"]}`;
+                type: "block";
+                linkable: false;
+                Data: {
+                    type: "named";
+                    name: string;
+                } | {
+                    type: "manual";
+                    title: string;
+                };
+                Storage: undefined;
+                Children: AnySchema[];
+            }[]];
+        } & {
+            SectionNames: TDefinition["sectionNames"];
+        }, ({
+            title: string;
+        } & (({
+            row?: true;
+            column?: undefined;
+        } | {
+            row?: undefined;
+            column?: true;
+        }) & TagChildren)) & import("../../toc.js").ObjPropToc & import("../../snippet.js").ObjPropSnippet & import("../../snippet.js").ObjPropSearch & import("../../snippet.js").ObjPropQuick & import("../../snippet.js").ObjPropSeo>, {
+            tagName: K;
+        }>; }, undefined>;
+    };
+    main: {
+        schema: {
+            name: `accentMain_${TDefinition["name"]}`;
+            type: "block";
+            linkable: false;
+            Data: undefined;
+            Storage: undefined;
+            Children: AnySchema[];
+        };
+        tag: import("@jsprose/core").Tag<`${UppercaseFirst<TDefinition["name"]>}Main`, {
+            name: `accentMain_${TDefinition["name"]}`;
+            type: "block";
+            linkable: false;
+            Data: undefined;
+            Storage: undefined;
+            Children: AnySchema[];
+        }, TagChildren>;
+        registryItem: import("@jsprose/core").RegistryItem<{
+            name: `accentMain_${TDefinition["name"]}`;
+            type: "block";
+            linkable: false;
+            Data: undefined;
+            Storage: undefined;
+            Children: AnySchema[];
+        }, { [K_1 in `${UppercaseFirst<TDefinition["name"]>}Main`]: Extract<import("@jsprose/core").Tag<`${UppercaseFirst<TDefinition["name"]>}Main`, {
+            name: `accentMain_${TDefinition["name"]}`;
+            type: "block";
+            linkable: false;
+            Data: undefined;
+            Storage: undefined;
+            Children: AnySchema[];
+        }, TagChildren>, {
+            tagName: K_1;
+        }>; }, undefined>;
+    };
+    section: {
+        schema: {
+            name: `accentSection_${TDefinition["name"]}`;
+            type: "block";
+            linkable: false;
+            Data: {
+                type: "named";
+                name: string;
+            } | {
+                type: "manual";
+                title: string;
+            };
+            Storage: undefined;
+            Children: AnySchema[];
+        };
+        tags: [import("@jsprose/core").Tag<`${UppercaseFirst<TDefinition["name"]>}Section`, {
+            name: `accentSection_${TDefinition["name"]}`;
+            type: "block";
+            linkable: false;
+            Data: {
+                type: "named";
+                name: string;
+            } | {
+                type: "manual";
+                title: string;
+            };
+            Storage: undefined;
+            Children: AnySchema[];
+        }, {
+            title: string;
+        } & TagChildren>, ...{ [K_2 in TDefinition["sectionNames"][number]]: import("@jsprose/core").Tag<`${UppercaseFirst<TDefinition["name"]>}${UppercaseFirst<K_2>}`, {
+            name: `accentSection_${TDefinition["name"]}`;
+            type: "block";
+            linkable: false;
+            Data: {
+                type: "named";
+                name: string;
+            } | {
+                type: "manual";
+                title: string;
+            };
+            Storage: undefined;
+            Children: AnySchema[];
+        }, TagChildren>; }[TDefinition["sectionNames"][number]][]];
+        registryItem: import("@jsprose/core").RegistryItem<{
+            name: `accentSection_${TDefinition["name"]}`;
+            type: "block";
+            linkable: false;
+            Data: {
+                type: "named";
+                name: string;
+            } | {
+                type: "manual";
+                title: string;
+            };
+            Storage: undefined;
+            Children: AnySchema[];
+        }, { [K_3 in (import("@jsprose/core").Tag<`${UppercaseFirst<TDefinition["name"]>}Section`, {
+            name: `accentSection_${TDefinition["name"]}`;
+            type: "block";
+            linkable: false;
+            Data: {
+                type: "named";
+                name: string;
+            } | {
+                type: "manual";
+                title: string;
+            };
+            Storage: undefined;
+            Children: AnySchema[];
+        }, {
+            title: string;
+        } & TagChildren> | { [K_2 in TDefinition["sectionNames"][number]]: import("@jsprose/core").Tag<`${UppercaseFirst<TDefinition["name"]>}${UppercaseFirst<K_2>}`, {
+            name: `accentSection_${TDefinition["name"]}`;
+            type: "block";
+            linkable: false;
+            Data: {
+                type: "named";
+                name: string;
+            } | {
+                type: "manual";
+                title: string;
+            };
+            Storage: undefined;
+            Children: AnySchema[];
+        }, TagChildren>; }[TDefinition["sectionNames"][number]])["tagName"]]: Extract<import("@jsprose/core").Tag<`${UppercaseFirst<TDefinition["name"]>}Section`, {
+            name: `accentSection_${TDefinition["name"]}`;
+            type: "block";
+            linkable: false;
+            Data: {
+                type: "named";
+                name: string;
+            } | {
+                type: "manual";
+                title: string;
+            };
+            Storage: undefined;
+            Children: AnySchema[];
+        }, {
+            title: string;
+        } & TagChildren>, {
+            tagName: K_3;
+        }> | Extract<{ [K_2 in TDefinition["sectionNames"][number]]: import("@jsprose/core").Tag<`${UppercaseFirst<TDefinition["name"]>}${UppercaseFirst<K_2>}`, {
+            name: `accentSection_${TDefinition["name"]}`;
+            type: "block";
+            linkable: false;
+            Data: {
+                type: "named";
+                name: string;
+            } | {
+                type: "manual";
+                title: string;
+            };
+            Storage: undefined;
+            Children: AnySchema[];
+        }, TagChildren>; }[TDefinition["sectionNames"][number]], {
+            tagName: K_3;
+        }>; }, undefined>;
+    };
+};

package/dist/elements/accent/core.js

@@ -0,0 +1,175 @@
+import { defineRegistryItem, defineSchema, ensureTagChildren, ensureTagInlinerChildren, isRawElement, PROSE_REGISTRY, ProseError } from "@jsprose/core";
+import { defineEruditTag } from "../../tag.js";
+import { uppercaseFirst } from "../../utils/case.js";
+import { tryParagraphWrap } from "../../shared/paragraphWrap.js";
+function validateTitle(tagName, title) {
+	if (!title) {
+		throw new ProseError(`<${tagName}> requires non-empty title attribute!`);
+	}
+}
+export function isAccentElement(element) {
+	return element.schemaName.startsWith("accent_");
+}
+export function isAccentMainElement(element) {
+	return element.schemaName.startsWith("accentMain_");
+}
+export function isAccentSectionElement(element) {
+	return element.schemaName.startsWith("accentSection_");
+}
+export function defineAccentCore(definition) {
+	// Accent name must start with lowercase
+	if (!/^[a-z]/.test(definition.name)) {
+		throw new ProseError(`
+Invalid accent name "${definition.name}"!
+Accent names should start with lower case letter.
+            `.trim());
+	}
+	for (const sectionName of definition.sectionNames) {
+		if (sectionName === "section" || sectionName === "main") {
+			throw new ProseError(`Section names "section" and "main" are reserved for accent "${definition.name}"!`);
+		}
+		// Section name must start with lowercase
+		if (!/^[a-z]/.test(sectionName)) {
+			throw new ProseError(`
+Invalid section name "${sectionName}" for accent "${definition.name}"!
+Section names should start with lower case letter.
+                `.trim());
+		}
+	}
+	//
+	// Schemas
+	//
+	const mainSchema = defineSchema({
+		name: `accentMain_${definition.name}`,
+		type: "block",
+		linkable: false
+	})();
+	const sectionSchema = defineSchema({
+		name: `accentSection_${definition.name}`,
+		type: "block",
+		linkable: false
+	})();
+	const accentSchema = defineSchema({
+		name: `accent_${definition.name}`,
+		type: "block",
+		linkable: true
+	})();
+	const typedAccentSchema = accentSchema;
+	//
+	// Tags
+	//
+	const mainTag = defineEruditTag({
+		tagName: `${uppercaseFirst(definition.name)}Main`,
+		schema: mainSchema
+	})(({ tagName, element, children }) => {
+		ensureTagChildren(tagName, children);
+		element.children = children;
+		const paragraphWrap = tryParagraphWrap(children);
+		if (paragraphWrap) {
+			element.children = paragraphWrap;
+		}
+	});
+	const sectionTag = defineEruditTag({
+		tagName: `${uppercaseFirst(definition.name)}Section`,
+		schema: sectionSchema
+	})(({ tagName, element, props, children }) => {
+		ensureTagChildren(tagName, children);
+		element.children = children;
+		const paragraphWrap = tryParagraphWrap(children);
+		if (paragraphWrap) {
+			element.children = paragraphWrap;
+		}
+		const title = props.title.trim();
+		validateTitle(tagName, title);
+		element.data = {
+			type: "manual",
+			title
+		};
+	});
+	function createSuffixSectionTag(suffix) {
+		return defineEruditTag({
+			tagName: `${uppercaseFirst(definition.name)}${uppercaseFirst(suffix)}`,
+			schema: sectionSchema
+		})(({ tagName, element, children }) => {
+			ensureTagChildren(tagName, children);
+			element.children = children;
+			const paragraphWrap = tryParagraphWrap(children);
+			if (paragraphWrap) {
+				element.children = paragraphWrap;
+			}
+			element.data = {
+				type: "named",
+				name: suffix
+			};
+		});
+	}
+	const namedSectionTags = Object.fromEntries(definition.sectionNames.map((sectionName) => {
+		const sectionTag = createSuffixSectionTag(sectionName);
+		return [sectionName, sectionTag];
+	}));
+	const sectionTags = [sectionTag, ...Object.values(namedSectionTags)];
+	const accentTag = defineEruditTag({
+		tagName: `${uppercaseFirst(definition.name)}`,
+		schema: typedAccentSchema
+	})(({ tagName, children, element, props, registry }) => {
+		try {
+			ensureTagChildren(tagName, children, [mainSchema, sectionSchema]);
+			element.children = children;
+			if (!isRawElement(element.children[0], mainSchema)) {
+				throw new ProseError(`<${tagName}> requires a <${mainTag.tagName}> as the first child element!`);
+			}
+		} catch {
+			element.children = [mainTag({
+				__JSPROSE_registryProp: PROSE_REGISTRY,
+				children
+			})];
+		}
+		const title = props.title.trim();
+		validateTitle(tagName, title);
+		let layout = "column";
+		if (props.row === true) {
+			layout = "row";
+		}
+		element.data = {
+			title,
+			layout
+		};
+		element.title = title;
+	});
+	//
+	// Registry Items
+	//
+	const mainRegistryItem = defineRegistryItem({
+		schema: mainSchema,
+		tags: [mainTag]
+	});
+	const sectionRegistryItem = defineRegistryItem({
+		schema: sectionSchema,
+		tags: [sectionTag, ...Object.values(namedSectionTags)]
+	});
+	const accentRegistryItem = defineRegistryItem({
+		schema: typedAccentSchema,
+		tags: [accentTag]
+	});
+	//
+	// Return
+	//
+	return {
+		_sectionNames: definition.sectionNames,
+		accent: {
+			schema: typedAccentSchema,
+			tag: accentTag,
+			registryItem: accentRegistryItem
+		},
+		main: {
+			schema: mainSchema,
+			tag: mainTag,
+			registryItem: mainRegistryItem
+		},
+		section: {
+			schema: sectionSchema,
+			tags: sectionTags,
+			registryItem: sectionRegistryItem
+		}
+	};
+}