@myelophone/nuxt 0.18.2

package/app/components/seo/OrgInfo.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+interface Props {
+	enabled?: boolean;
+	context?: string;
+	type?: string | string[];
+	id?: string;
+	name?: string;
+	alternateName?: string | string[];
+	legalName?: string;
+	description?: string;
+	url?: string;
+	logo?: string | JsonLdNode;
+	image?: string | JsonLdNode | JsonLdValue[];
+	sameAs?: string[];
+	email?: string;
+	telephone?: string;
+	address?: string | JsonLdNode | JsonLdValue[];
+	contactPoint?: JsonLdNode | JsonLdValue[];
+	founder?: JsonLdNode | JsonLdValue[];
+	foundingDate?: string;
+	foundingLocation?: string | JsonLdNode;
+	employee?: JsonLdNode | JsonLdValue[];
+	numberOfEmployees?: number | JsonLdNode;
+	parentOrganization?: JsonLdNode;
+	subOrganization?: JsonLdNode | JsonLdValue[];
+	department?: JsonLdNode | JsonLdValue[];
+	member?: JsonLdNode | JsonLdValue[];
+	memberOf?: JsonLdNode | JsonLdValue[];
+	owns?: JsonLdNode | JsonLdValue[];
+	brand?: JsonLdNode | JsonLdValue[];
+	slogan?: string;
+	areaServed?: string | JsonLdNode | JsonLdValue[];
+	award?: string | string[];
+	knowsAbout?: string | JsonLdNode | JsonLdValue[];
+	keywords?: string | string[];
+	taxID?: string;
+	vatID?: string;
+	duns?: string;
+	globalLocationNumber?: string;
+	iso6523Code?: string;
+	leiCode?: string;
+	naics?: string;
+	nonprofitStatus?: string;
+	aggregateRating?: JsonLdNode;
+	review?: JsonLdNode | JsonLdValue[];
+	makesOffer?: JsonLdNode | JsonLdValue[];
+	seeks?: JsonLdNode | JsonLdValue[];
+	hasOfferCatalog?: JsonLdNode;
+	hasMerchantReturnPolicy?: JsonLdNode | JsonLdValue[];
+	hasShippingService?: JsonLdNode | JsonLdValue[];
+	graph?: JsonLdNode[];
+	data?: JsonLdNode;
+	scriptKey?: string;
+	scriptId?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	enabled: true,
+	context: "https://schema.org",
+	type: "Organization",
+	data: () => ({}),
+});
+
+const instanceId = useId();
+const schema = computed<JsonLdNode | null>(() => {
+	if (!props.enabled) return null;
+
+	const record: JsonLdNode = {
+		...props.data,
+		"@context": props.context,
+		"@type": props.type,
+		...compactJsonLd({
+			"@id": props.id,
+			name: props.name,
+			alternateName: props.alternateName,
+			legalName: props.legalName,
+			description: props.description,
+			url: props.url,
+			logo: props.logo,
+			image: props.image,
+			sameAs: props.sameAs,
+			email: props.email,
+			telephone: props.telephone,
+			address: props.address,
+			contactPoint: props.contactPoint,
+			founder: props.founder,
+			foundingDate: props.foundingDate,
+			foundingLocation: props.foundingLocation,
+			employee: props.employee,
+			numberOfEmployees: props.numberOfEmployees,
+			parentOrganization: props.parentOrganization,
+			subOrganization: props.subOrganization,
+			department: props.department,
+			member: props.member,
+			memberOf: props.memberOf,
+			owns: props.owns,
+			brand: props.brand,
+			slogan: props.slogan,
+			areaServed: props.areaServed,
+			award: props.award,
+			knowsAbout: props.knowsAbout,
+			keywords: props.keywords,
+			taxID: props.taxID,
+			vatID: props.vatID,
+			duns: props.duns,
+			globalLocationNumber: props.globalLocationNumber,
+			iso6523Code: props.iso6523Code,
+			leiCode: props.leiCode,
+			naics: props.naics,
+			nonprofitStatus: props.nonprofitStatus,
+			aggregateRating: props.aggregateRating,
+			review: props.review,
+			makesOffer: props.makesOffer,
+			seeks: props.seeks,
+			hasOfferCatalog: props.hasOfferCatalog,
+			hasMerchantReturnPolicy: props.hasMerchantReturnPolicy,
+			hasShippingService: props.hasShippingService,
+		}),
+	};
+
+	return wrapJsonLdGraph(record, props.graph);
+});
+
+useJsonLd(schema, {
+	key: computed(() => props.scriptKey ?? `seo-org-info-${instanceId}`),
+	id: computed(() => props.scriptId),
+});
+</script>
+
+<template />

package/app/components/seo/ProfileInfo.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+interface Props {
+	enabled?: boolean;
+	context?: string;
+	type?: string | string[];
+	id?: string;
+	url?: string;
+	name?: string;
+	headline?: string;
+	description?: string;
+	dateCreated?: string;
+	dateModified?: string;
+	datePublished?: string;
+	inLanguage?: string | string[];
+	image?: string | JsonLdNode | JsonLdValue[];
+	isPartOf?: string | JsonLdNode;
+	breadcrumb?: string | JsonLdNode;
+	hasPart?: JsonLdNode | JsonLdValue[];
+	about?: JsonLdNode | JsonLdValue[];
+	author?: JsonLdNode | JsonLdValue[];
+	publisher?: JsonLdNode;
+	mainEntity?: JsonLdNode;
+	entityOnly?: boolean;
+	entity?: JsonLdNode;
+	entityType?: "Person" | "Organization" | string;
+	entityId?: string;
+	entityName?: string;
+	alternateName?: string | string[];
+	identifier?: string | JsonLdNode | JsonLdValue[];
+	entityDescription?: string;
+	entityImage?: string | JsonLdNode | JsonLdValue[];
+	entityUrl?: string;
+	sameAs?: string[];
+	jobTitle?: string;
+	email?: string;
+	telephone?: string;
+	address?: string | JsonLdNode | JsonLdValue[];
+	founder?: JsonLdNode | JsonLdValue[];
+	owns?: JsonLdNode | JsonLdValue[];
+	worksFor?: JsonLdNode | JsonLdValue[];
+	knowsAbout?: string | JsonLdNode | JsonLdValue[];
+	knowsLanguage?: string | JsonLdNode | JsonLdValue[];
+	interactionStatistic?: JsonLdNode | JsonLdValue[];
+	agentInteractionStatistic?: JsonLdNode | JsonLdValue[];
+	graph?: JsonLdNode[];
+	data?: JsonLdNode;
+	scriptKey?: string;
+	scriptId?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	enabled: true,
+	context: "https://schema.org",
+	type: "ProfilePage",
+	entityType: "Person",
+	entityOnly: false,
+	entity: () => ({}),
+	data: () => ({}),
+});
+
+const instanceId = useId();
+const generatedEntity = computed<JsonLdNode>(() => ({
+	...props.entity,
+	"@type": props.entityType,
+	...compactJsonLd({
+		"@id": props.entityId ?? (props.entityOnly ? props.id : undefined),
+		name: props.entityName ?? (props.entityOnly ? props.name : undefined),
+		alternateName: props.alternateName,
+		identifier: props.identifier,
+		description:
+			props.entityDescription ??
+			(props.entityOnly ? props.description : undefined),
+		image:
+			props.entityImage ?? (props.entityOnly ? props.image : undefined),
+		url: props.entityUrl ?? (props.entityOnly ? props.url : undefined),
+		sameAs: props.sameAs,
+		jobTitle: props.jobTitle,
+		email: props.email,
+		telephone: props.telephone,
+		address: props.address,
+		founder: props.founder,
+		owns: props.owns,
+		worksFor: props.worksFor,
+		knowsAbout: props.knowsAbout,
+		knowsLanguage: props.knowsLanguage,
+		interactionStatistic: props.interactionStatistic,
+		agentInteractionStatistic: props.agentInteractionStatistic,
+	}),
+}));
+
+const schema = computed<JsonLdNode | null>(() => {
+	if (!props.enabled) return null;
+	if (props.entityOnly) {
+		return wrapJsonLdGraph(
+			{
+				"@context": props.context,
+				...generatedEntity.value,
+			},
+			props.graph,
+		);
+	}
+
+	const record: JsonLdNode = {
+		...props.data,
+		"@context": props.context,
+		"@type": props.type,
+		...compactJsonLd({
+			"@id": props.id,
+			url: props.url,
+			name: props.name,
+			headline: props.headline,
+			description: props.description,
+			dateCreated: props.dateCreated,
+			dateModified: props.dateModified,
+			datePublished: props.datePublished,
+			inLanguage: props.inLanguage,
+			image: props.image,
+			isPartOf: props.isPartOf,
+			breadcrumb: props.breadcrumb,
+			hasPart: props.hasPart,
+			about: props.about,
+			author: props.author,
+			publisher: props.publisher,
+			mainEntity: props.mainEntity ?? generatedEntity.value,
+		}),
+	};
+
+	return wrapJsonLdGraph(record, props.graph);
+});
+
+useJsonLd(schema, {
+	key: computed(() => props.scriptKey ?? `seo-profile-info-${instanceId}`),
+	id: computed(() => props.scriptId),
+});
+</script>
+
+<template />

package/app/components/ui/Accordion.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+interface AccordionItem {
+	label: string;
+	content: string;
+	defaultOpen?: boolean;
+	[key: string]: any;
+}
+
+interface AccordionClasses {
+	wrapper?: string;
+	item?: string;
+	header?: string;
+	headerActive?: string;
+	headerIcon?: string;
+	contentWrapper?: string;
+	content?: string;
+}
+
+const props = withDefaults(
+	defineProps<{
+		items: AccordionItem[];
+		multiple?: boolean;
+		faq?: boolean;
+		ui?: AccordionClasses;
+	}>(),
+	{
+		multiple: false,
+		faq: false,
+		ui: () => ({}),
+	},
+);
+
+const openIndices = ref<number[]>(
+	props.items
+		.map((item, index) => (item.defaultOpen ? index : -1))
+		.filter((i) => i !== -1),
+);
+
+const toggle = (index: number) => {
+	if (props.multiple) {
+		if (openIndices.value.includes(index)) {
+			openIndices.value = openIndices.value.filter((i) => i !== index);
+		} else {
+			openIndices.value.push(index);
+		}
+	} else {
+		if (openIndices.value.includes(index)) {
+			openIndices.value = [];
+		} else {
+			openIndices.value = [index];
+		}
+	}
+};
+
+const isOpen = (index: number) => openIndices.value.includes(index);
+
+if (props.faq) {
+	const faqSchema = computed(() => ({
+		"@context": "https://schema.org",
+		"@type": "FAQPage",
+		mainEntity: props.items.map((item) => ({
+			"@type": "Question",
+			name: item.label,
+			acceptedAnswer: {
+				"@type": "Answer",
+				text: item.content,
+			},
+		})),
+	}));
+
+	useHead(() => ({
+		script: [
+			{
+				type: "application/ld+json",
+				key: "faq-schema",
+				innerHTML: JSON.stringify(faqSchema.value),
+			},
+		],
+	}));
+}
+
+const layoutContentWrapper =
+	"grid transition-[grid-template-rows] duration-300 ease-out";
+const layoutHeader =
+	"flex items-center justify-between w-full text-left cursor-pointer select-none pt-[0.8rem]";
+
+const defaultWrapper = "space-y-4";
+const defaultItem =
+	"border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 overflow-hidden";
+const defaultHeader =
+	"p-4 font-semibold text-neutral-800 dark:text-neutral-100 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors";
+const defaultHeaderActive = "bg-neutral-50 dark:bg-neutral-800 text-primary";
+const defaultIcon =
+	"w-5 h-5 text-neutral-400 transition-transform duration-300";
+const defaultContent =
+	"p-4 text-neutral-600 dark:text-neutral-400 leading-relaxed border-t border-transparent";
+</script>
+
+<template>
+	<div :class="ui.wrapper || defaultWrapper">
+		<div
+			v-for="(item, index) in items"
+			:key="index"
+			:class="ui.item || defaultItem"
+		>
+			<button
+				type="button"
+				@click="toggle(index)"
+				:class="[
+					layoutHeader,
+					ui.header || defaultHeader,
+					isOpen(index) ? ui.headerActive || defaultHeaderActive : '',
+				]"
+				:aria-expanded="isOpen(index)"
+			>
+				<slot
+					name="header"
+					:item="item"
+					:index="index"
+					:is-open="isOpen(index)"
+				>
+					<span>{{ item.label }}</span>
+				</slot>
+
+				<span
+					:class="[
+						ui.headerIcon || defaultIcon,
+						isOpen(index) ? 'rotate-180' : '',
+					]"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						class="w-full h-full"
+					>
+						<polyline points="6 9 12 15 18 9"></polyline>
+					</svg>
+				</span>
+			</button>
+
+			<div
+				:class="[
+					layoutContentWrapper,
+					ui.contentWrapper,
+					isOpen(index) ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+				]"
+			>
+				<div class="overflow-hidden">
+					<div :class="ui.content || defaultContent">
+						<slot name="content" :item="item" :index="index">
+							<div v-html="item.content" />
+						</slot>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>

package/app/components/ui/Alert.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+const props = withDefaults(
+	defineProps<{
+		variant?: "info" | "success" | "warning" | "error";
+
+		title?: string;
+		description?: string;
+
+		icon?: string;
+		avatar?: {
+			src?: string;
+			icon?: string;
+			alt?: string;
+		};
+
+		size?: "sm" | "md" | "lg";
+		closable?: boolean;
+		rounded?: boolean;
+
+		avatarSize?: AvatarSize;
+	}>(),
+	{
+		variant: "info",
+		size: "md",
+		closable: false,
+		rounded: true,
+	},
+);
+
+const visible = ref(true);
+
+const slots = useSlots();
+
+type AvatarSize = "sm" | "md" | "lg";
+
+const avatarSize = computed<AvatarSize>(() => {
+	if (props.avatarSize) return props.avatarSize;
+	if (slots.actions) return "lg";
+	if (props.description || slots.default) return "md";
+	return "sm";
+});
+
+const avatarSizes: Record<AvatarSize, string> = {
+	sm: "h-8 w-8",
+	md: "h-10 w-10",
+	lg: "h-14 w-14",
+};
+
+const avatarPadding: Record<AvatarSize, string> = {
+	sm: "px-2",
+	md: "px-3",
+	lg: "px-4",
+};
+
+const close = () => {
+	visible.value = false;
+};
+
+const styles = computed(() => {
+	const map = {
+		info: {
+			base: "bg-blue-50 text-blue-900",
+			border: "border-blue-200",
+			accent: "text-blue-600",
+		},
+		success: {
+			base: "bg-emerald-50 text-emerald-900",
+			border: "border-emerald-200",
+			accent: "text-emerald-600",
+		},
+		warning: {
+			base: "bg-amber-50 text-amber-900",
+			border: "border-amber-200",
+			accent: "text-amber-600",
+		},
+		error: {
+			base: "bg-red-50 text-red-900",
+			border: "border-red-200",
+			accent: "text-red-600",
+		},
+	};
+	return map[props.variant];
+});
+
+const sizes = computed(
+	() =>
+		({
+			sm: {
+				container: "p-3 gap-3 text-sm",
+				icon: "h-4 w-4",
+				avatar: "w-12",
+			},
+			md: {
+				container: "p-4 gap-4 text-sm",
+				icon: "h-5 w-5",
+				avatar: "w-14",
+			},
+			lg: {
+				container: "p-5 gap-5 text-base",
+				icon: "h-6 w-6",
+				avatar: "w-16",
+			},
+		})[props.size],
+);
+</script>
+
+<template>
+	<div
+		v-if="visible"
+		role="alert"
+		:class="[
+			avatar ? 'grid grid-cols-[auto,1fr]' : 'block',
+			'relative border',
+			styles.base,
+			styles.border,
+			sizes.container,
+			rounded ? 'rounded-xl' : 'rounded-none',
+		]"
+	>
+		<div
+			v-if="avatar"
+			class="self-stretch flex items-center justify-center"
+			:class="avatarPadding[avatarSize]"
+		>
+			<div
+				:class="[
+					'flex items-center justify-center',
+					avatarSizes[avatarSize],
+				]"
+			>
+				<SafeImgWithLoader
+					v-if="avatar.src"
+					:src="avatar.src"
+					:alt="avatar.alt || ''"
+					class="h-full w-full object-contain rounded-full"
+				/>
+
+				<UiIcon
+					v-else-if="avatar.icon"
+					:name="avatar.icon"
+					class="h-full w-full"
+				/>
+			</div>
+		</div>
+
+		<div class="flex flex-col justify-center gap-1 min-w-0">
+			<div
+				v-if="$slots.title || title"
+				class="font-semibold leading-tight"
+			>
+				<span v-if="icon" class="inline-flex align-middle mr-2">
+					<UiIcon :name="icon" :class="[sizes.icon, styles.accent]" />
+				</span>
+
+				<slot name="title">{{ title }}</slot>
+			</div>
+
+			<div
+				v-if="$slots.default || description"
+				class="leading-relaxed opacity-90"
+			>
+				<slot>{{ description }}</slot>
+			</div>
+
+			<div v-if="$slots.actions" class="mt-2">
+				<slot name="actions" />
+			</div>
+		</div>
+
+		<button
+			v-if="closable"
+			@click="close"
+			class="absolute top-3 right-3 opacity-60 hover:opacity-100 transition"
+			aria-label="Close alert"
+		>
+			<UiIcon name="heroicons:x-mark" class="h-5 w-5" />
+		</button>
+	</div>
+</template>

package/app/components/ui/Avatar.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+interface Props {
+	src?: string;
+	alt?: string;
+	name?: string;
+	icon?: string;
+	text?: string;
+	size?: "sm" | "md" | "lg" | "xl";
+	chipColor?: string;
+	chipPosition?: "top-right" | "bottom-right" | "top-left" | "bottom-left";
+	class?: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	size: "md",
+	chipPosition: "top-right",
+});
+
+const initials = computed(() => {
+	if (props.text) return props.text.slice(0, 2).toUpperCase();
+	if (!props.name) return "";
+	const parts = props.name.trim().split(/\s+/);
+	if (parts.length >= 2) {
+		const first = parts[0]?.[0] || "";
+		const second = parts[1]?.[0] || "";
+		return (first + second).toUpperCase();
+	}
+	return parts[0]?.slice(0, 2).toUpperCase() || "";
+});
+
+const sizeClasses = {
+	sm: "w-8 h-8 text-[10px]",
+	md: "w-10 h-10 text-xs",
+	lg: "w-12 h-12 text-sm",
+	xl: "w-16 h-16 text-base",
+};
+
+const chipPositionClasses = {
+	"top-right": "-top-0.5 -right-0.5",
+	"bottom-right": "-bottom-0.5 -right-0.5",
+	"top-left": "-top-0.5 -left-0.5",
+	"bottom-left": "-bottom-0.5 -left-0.5",
+};
+</script>
+
+<template>
+	<div
+		:class="[
+			'relative inline-flex shrink-0 items-center justify-center select-none rounded-full',
+			sizeClasses[size],
+			props.class,
+		]"
+	>
+		<div
+			class="absolute inset-0 rounded-full overflow-hidden bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center text-zinc-500 dark:text-zinc-400 font-medium"
+		>
+			<span v-if="initials && !src" class="uppercase">
+				{{ initials }}
+			</span>
+
+			<UiIcon v-else-if="icon" :name="icon" class="w-1/2 h-1/2" />
+
+			<SafeImgWithLoader
+				v-else-if="src"
+				:src="src"
+				:alt="alt || name || 'avatar'"
+				class="absolute inset-0 h-full w-full object-cover"
+				loading="lazy"
+			/>
+
+			<UiIcon
+				v-else
+				name="i-heroicons-user-20-solid"
+				class="w-1/2 h-1/2 opacity-50"
+			/>
+		</div>
+
+		<span
+			v-if="chipColor"
+			:class="[
+				'absolute block rounded-full border-2 border-white dark:border-zinc-900 z-10',
+				size === 'sm' ? 'h-2.5 w-2.5' : 'h-3.5 w-3.5',
+				chipPositionClasses[chipPosition],
+			]"
+			:style="{ backgroundColor: chipColor }"
+		></span>
+	</div>
+</template>