@xenterprises/nuxt-x-marketing 1.4.8 → 1.4.10

package/CHANGELOG.md

@@ -30,6 +30,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   section and its sample product data were dropped with them. Every other section of the
   demo page is unchanged.
 
+## [1.4.10] - 2026-09-06
+
+### Added
+
+- `XMarkBreadcrumb` for Docs/Academy articles: default trail is Home > Docs|Academy > current page (last crumb unlinked). Pass `items` to override. Built on `UBreadcrumb`.
+
+## [1.4.9] - 2026-09-06
+
+### Fixed
+
+- `XMarkPricingPlans` spells billing periods as **per month** / **per year** by default (not `/month` `/year`), and normalizes common slash forms when mapping plans.
+
 ## [1.4.8] - 2026-09-06
 
 ### Fixed

package/app/components/X/Mark/Breadcrumb/index.vue

@@ -0,0 +1,79 @@
+<template>
+	<nav class="x-mark-breadcrumb" aria-label="Breadcrumb">
+		<UBreadcrumb :items="resolvedItems" />
+	</nav>
+</template>
+
+<script setup>
+/**
+ * XMarkBreadcrumb — Docs/Academy article breadcrumbs (marketing page standard).
+ * Prefer section + current for the default Home > Docs|Academy > page trail.
+ * Pass items to fully override. Last item is the current page (no link).
+ */
+const props = defineProps({
+	/** Full trail [{ label, to? }]. When set, overrides section/current builders. */
+	items: {
+		type: Array,
+		default: null,
+	},
+	/** Section root: docs or academy (builds Home > Section > current). */
+	section: {
+		type: String,
+		default: "docs",
+		validator: (v) => ["docs", "academy"].includes(v),
+	},
+	/** Current page label (required for the default trail when items is null). */
+	current: {
+		type: String,
+		default: "",
+	},
+	/** Home crumb label */
+	homeLabel: {
+		type: String,
+		default: "Home",
+	},
+	/** Home crumb path */
+	homeTo: {
+		type: String,
+		default: "/",
+	},
+	/** Override section crumb label */
+	sectionLabel: {
+		type: String,
+		default: "",
+	},
+	/** Override section crumb path */
+	sectionTo: {
+		type: String,
+		default: "",
+	},
+});
+
+const sectionDefaults = {
+	docs: { label: "Docs", to: "/docs" },
+	academy: { label: "Academy", to: "/academy" },
+};
+
+const resolvedItems = computed(() => {
+	if (Array.isArray(props.items) && props.items.length) {
+		return props.items.map((item, index, arr) => {
+			const isLast = index === arr.length - 1;
+			return {
+				label: item.label,
+				...(isLast || !item.to ? {} : { to: item.to }),
+			};
+		});
+	}
+
+	const section = sectionDefaults[props.section] || sectionDefaults.docs;
+	const sectionLabel = props.sectionLabel || section.label;
+	const sectionTo = props.sectionTo || section.to;
+	const current = props.current || "Article";
+
+	return [
+		{ label: props.homeLabel, to: props.homeTo },
+		{ label: sectionLabel, to: sectionTo },
+		{ label: current },
+	];
+});
+</script>

package/app/components/X/Mark/Pricing/Plans.vue

@@ -82,7 +82,7 @@ const props = defineProps({
 			{
 				name: "Starter",
 				price: "$9",
-				period: "/month",
+				period: "per month",
 				description: "Perfect for individuals and small projects.",
 				features: ["5 projects", "10GB storage", "Email support"],
 				button: { label: "Get Started" },
@@ -90,7 +90,7 @@ const props = defineProps({
 			{
 				name: "Pro",
 				price: "$29",
-				period: "/month",
+				period: "per month",
 				description: "For growing teams that need more power.",
 				features: [
 					"Unlimited projects",
@@ -104,7 +104,7 @@ const props = defineProps({
 			{
 				name: "Enterprise",
 				price: "$99",
-				period: "/month",
+				period: "per month",
 				description: "For large organizations with custom needs.",
 				features: [
 					"Unlimited everything",
@@ -171,6 +171,14 @@ const emit = defineEmits(["select"]);
 
 const billingPeriod = ref("monthly");
 
+function normalizePeriod(period) {
+	if (!period) return period;
+	const trimmed = String(period).trim().toLowerCase();
+	if (["/month", "/mo", "mo", "month"].includes(trimmed)) return "per month";
+	if (["/year", "/yr", "yr", "year"].includes(trimmed)) return "per year";
+	return period;
+}
+
 // Map XMark plan format to Nuxt UI format
 const mappedPlans = computed(() => {
 	return props.plans.map((plan) => {
@@ -183,9 +191,13 @@ const mappedPlans = computed(() => {
 				billingPeriod.value === "yearly"
 					? plan.price.yearly
 					: plan.price.monthly;
-			billingCycle = billingPeriod.value === "yearly" ? "/year" : "/month";
+			billingCycle =
+				billingPeriod.value === "yearly" ? "per year" : "per month";
 		} else if (props.hasBillingToggle && !plan.period) {
-			billingCycle = billingPeriod.value === "yearly" ? "/year" : "/month";
+			billingCycle =
+				billingPeriod.value === "yearly" ? "per year" : "per month";
+		} else {
+			billingCycle = normalizePeriod(billingCycle);
 		}
 
 		// Determine if this plan should be highlighted

package/package.json

@@ -2,7 +2,7 @@
   "name": "@xenterprises/nuxt-x-marketing",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "1.4.8",
+  "version": "1.4.10",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",