@xenterprises/nuxt-x-marketing 1.0.0 → 1.0.2

package/app/components/X/Mark/Modal/Chat.vue

@@ -1,151 +1,151 @@
 <template>
-  <Transition
-    enter-active-class="transition-all duration-300 ease-out"
-    enter-from-class="translate-y-4 opacity-0"
-    leave-active-class="transition-all duration-200 ease-in"
-    leave-to-class="translate-y-4 opacity-0"
-  >
-    <aside
-      v-if="isVisible"
-      class="fixed bottom-6 right-6 z-40 max-w-sm"
-    >
-      <div class="xGlass rounded-2xl p-4 shadow-xl">
-        <!-- Close button -->
-        <button
-          class="absolute top-2 right-2 p-1 rounded-full hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
-          aria-label="Close"
-          @click="dismiss"
-        >
-          <UIcon name="i-lucide-x" class="w-4 h-4 text-gray-400" />
-        </button>
+	<Transition
+		enter-active-class="transition-all duration-300 ease-out"
+		enter-from-class="translate-y-4 opacity-0"
+		leave-active-class="transition-all duration-200 ease-in"
+		leave-to-class="translate-y-4 opacity-0"
+	>
+		<aside v-if="isVisible" class="fixed bottom-6 right-6 z-40 max-w-sm">
+			<div class="xGlass rounded-2xl p-4 shadow-xl">
+				<!-- Close button -->
+				<button
+					class="absolute top-2 right-2 p-1 rounded-full hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
+					aria-label="Close"
+					@click="dismiss"
+				>
+					<UIcon name="i-lucide-x" class="w-4 h-4 text-gray-400" />
+				</button>
 
-        <!-- Content -->
-        <div class="flex gap-3">
-          <!-- Avatar -->
-          <img
-            v-if="avatar"
-            :src="avatar"
-            :alt="name"
-            class="w-12 h-12 rounded-full object-cover flex-shrink-0"
-          />
-          <div
-            v-else
-            class="w-12 h-12 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center flex-shrink-0"
-          >
-            <span class="text-primary-600 dark:text-primary-400 font-medium text-lg">
-              {{ name.charAt(0) }}
-            </span>
-          </div>
+				<!-- Content -->
+				<div class="flex gap-3">
+					<!-- Avatar -->
+					<img
+						v-if="avatar"
+						:src="avatar"
+						:alt="name"
+						class="w-12 h-12 rounded-full object-cover flex-shrink-0"
+					/>
+					<div
+						v-else
+						class="w-12 h-12 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center flex-shrink-0"
+					>
+						<span
+							class="text-primary-600 dark:text-primary-400 font-medium text-lg"
+						>
+							{{ name.charAt(0) }}
+						</span>
+					</div>
 
-          <div class="flex-1 min-w-0">
-            <!-- Header -->
-            <div class="flex items-center gap-2 mb-1">
-              <span class="font-medium text-gray-900 dark:text-white">
-                {{ name }}
-              </span>
-              <span
-                v-if="online"
-                class="w-2 h-2 rounded-full bg-green-500"
-              />
-            </div>
+					<div class="flex-1 min-w-0">
+						<!-- Header -->
+						<div class="flex items-center gap-2 mb-1">
+							<span class="font-medium text-gray-900 dark:text-white">
+								{{ name }}
+							</span>
+							<span v-if="online" class="w-2 h-2 rounded-full bg-green-500" />
+						</div>
 
-            <!-- Message -->
-            <p class="text-sm text-gray-600 dark:text-gray-400">
-              {{ message }}
-            </p>
+						<!-- Message -->
+						<p class="text-sm text-gray-600 dark:text-gray-400">
+							{{ message }}
+						</p>
 
-            <!-- Action -->
-            <UButton
-              v-if="actionText"
-              size="sm"
-              class="mt-3"
-              @click="handleAction"
-            >
-              {{ actionText }}
-            </UButton>
-          </div>
-        </div>
-      </div>
-    </aside>
-  </Transition>
+						<!-- Action -->
+						<UButton
+							v-if="actionText"
+							size="sm"
+							class="mt-3"
+							@click="handleAction"
+						>
+							{{ actionText }}
+						</UButton>
+					</div>
+				</div>
+			</div>
+		</aside>
+	</Transition>
 </template>
 
 <script setup>
 const props = defineProps({
-  /** v-model visibility */
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-  /** Avatar image URL */
-  avatar: {
-    type: String,
-    default: '',
-  },
-  /** Person/bot name */
-  name: {
-    type: String,
-    required: true,
-  },
-  /** Chat message */
-  message: {
-    type: String,
-    required: true,
-  },
-  /** Show online indicator */
-  online: {
-    type: Boolean,
-    default: true,
-  },
-  /** Button text */
-  actionText: {
-    type: String,
-    default: '',
-  },
-  /** Auto-dismiss after ms (0 = never) */
-  autoDismiss: {
-    type: Number,
-    default: 0,
-  },
-  /** Delay before showing (ms) */
-  delay: {
-    type: Number,
-    default: 3000,
-  },
+	/** v-model visibility */
+	modelValue: {
+		type: Boolean,
+		default: false,
+	},
+	/** Avatar image URL */
+	avatar: {
+		type: String,
+		default: "",
+	},
+	/** Person/bot name */
+	name: {
+		type: String,
+		default: "Support",
+	},
+	/** Chat message */
+	message: {
+		type: String,
+		default: "Hi there! 👋 How can I help you today?",
+	},
+	/** Show online indicator */
+	online: {
+		type: Boolean,
+		default: true,
+	},
+	/** Button text */
+	actionText: {
+		type: String,
+		default: "",
+	},
+	/** Auto-dismiss after ms (0 = never) */
+	autoDismiss: {
+		type: Number,
+		default: 0,
+	},
+	/** Delay before showing (ms) */
+	delay: {
+		type: Number,
+		default: 3000,
+	},
 });
 
-const emit = defineEmits(['update:modelValue', 'action', 'dismiss']);
+const emit = defineEmits(["update:modelValue", "action", "dismiss"]);
 
 const isVisible = ref(false);
 let dismissTimeout = null;
 let showTimeout = null;
 
 const dismiss = () => {
-  isVisible.value = false;
-  emit('update:modelValue', false);
-  emit('dismiss');
+	isVisible.value = false;
+	emit("update:modelValue", false);
+	emit("dismiss");
 };
 
 const handleAction = () => {
-  emit('action');
+	emit("action");
 };
 
-watch(() => props.modelValue, (val) => {
-  if (val) {
-    showTimeout = setTimeout(() => {
-      isVisible.value = true;
+watch(
+	() => props.modelValue,
+	(val) => {
+		if (val) {
+			showTimeout = setTimeout(() => {
+				isVisible.value = true;
 
-      if (props.autoDismiss > 0) {
-        dismissTimeout = setTimeout(dismiss, props.autoDismiss);
-      }
-    }, props.delay);
-  } else {
-    isVisible.value = false;
-  }
-}, { immediate: true });
+				if (props.autoDismiss > 0) {
+					dismissTimeout = setTimeout(dismiss, props.autoDismiss);
+				}
+			}, props.delay);
+		} else {
+			isVisible.value = false;
+		}
+	},
+	{ immediate: true }
+);
 
 onUnmounted(() => {
-  if (dismissTimeout) clearTimeout(dismissTimeout);
-  if (showTimeout) clearTimeout(showTimeout);
+	if (dismissTimeout) clearTimeout(dismissTimeout);
+	if (showTimeout) clearTimeout(showTimeout);
 });
 </script>

package/app/components/X/Mark/Modal/Video.vue

@@ -20,8 +20,12 @@
 					:alt="title || 'Video thumbnail'"
 					class="w-full aspect-video object-cover transition-transform group-hover:scale-105"
 				/>
-				<div class="absolute inset-0 bg-black/40 flex items-center justify-center group-hover:bg-black/50 transition-colors">
-					<div class="w-16 h-16 rounded-full bg-white/90 flex items-center justify-center shadow-lg">
+				<div
+					class="absolute inset-0 bg-black/40 flex items-center justify-center group-hover:bg-black/50 transition-colors"
+				>
+					<div
+						class="w-16 h-16 rounded-full bg-white/90 flex items-center justify-center shadow-lg"
+					>
 						<UIcon name="i-lucide-play" class="w-8 h-8 text-neutral-900 ml-1" />
 					</div>
 				</div>
@@ -40,7 +44,10 @@
 
 		<!-- Video Content -->
 		<template #content>
-			<div class="aspect-video bg-black overflow-hidden" :class="title || description ? 'rounded-t-lg' : 'rounded-lg'">
+			<div
+				class="aspect-video bg-black overflow-hidden"
+				:class="title || description ? 'rounded-t-lg' : 'rounded-lg'"
+			>
 				<!-- YouTube Embed -->
 				<iframe
 					v-if="modalRef?.isOpen && embedType === 'youtube'"
@@ -89,33 +96,36 @@ const props = defineProps({
 	/** Video source (direct URL, YouTube, or Vimeo) */
 	src: {
 		type: String,
-		required: true,
+		default: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
 	},
 	/** Thumbnail image URL (shows image with play button) */
 	thumbnail: {
 		type: String,
-		default: '',
+		default: "",
 	},
 	/** Poster image for direct videos */
 	poster: {
 		type: String,
-		default: '',
+		default: "",
 	},
 	/** Video title (shown in modal footer) */
 	title: {
 		type: String,
-		default: '',
+		default: "",
 	},
 	/** Video description (shown in modal footer) */
 	description: {
 		type: String,
-		default: '',
+		default: "",
 	},
 	/** Modal size */
 	size: {
 		type: String,
-		default: '4xl',
-		validator: (v) => ['lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', 'full'].includes(v),
+		default: "4xl",
+		validator: (v) =>
+			["lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "full"].includes(
+				v
+			),
 	},
 	/** Autoplay video when modal opens */
 	autoplay: {
@@ -130,63 +140,63 @@ const props = defineProps({
 	/** Captions/subtitles file URL */
 	captions: {
 		type: String,
-		default: '',
+		default: "",
 	},
 	/** Captions language code */
 	captionsLang: {
 		type: String,
-		default: 'en',
+		default: "en",
 	},
 	/** Captions label */
 	captionsLabel: {
 		type: String,
-		default: 'English',
+		default: "English",
 	},
 });
 
-const emit = defineEmits(['open', 'close']);
+const emit = defineEmits(["open", "close"]);
 
 const modalRef = ref(null);
 const videoRef = ref(null);
 
 // Button props with defaults
 const buttonProps = computed(() => ({
-	label: props.button.label || 'Watch Video',
-	color: props.button.color || 'primary',
-	variant: props.button.variant || 'solid',
-	size: props.button.size || 'md',
-	icon: props.button.icon || 'i-lucide-play',
+	label: props.button.label || "Watch Video",
+	color: props.button.color || "primary",
+	variant: props.button.variant || "solid",
+	size: props.button.size || "md",
+	icon: props.button.icon || "i-lucide-play",
 }));
 
 // Detect embed type from URL
 const embedType = computed(() => {
-	if (props.src.includes('youtube.com') || props.src.includes('youtu.be')) {
-		return 'youtube';
+	if (props.src.includes("youtube.com") || props.src.includes("youtu.be")) {
+		return "youtube";
 	}
-	if (props.src.includes('vimeo.com')) {
-		return 'vimeo';
+	if (props.src.includes("vimeo.com")) {
+		return "vimeo";
 	}
-	return 'direct';
+	return "direct";
 });
 
 // Generate embed URL
 const embedUrl = computed(() => {
-	const autoplayParam = props.autoplay ? '1' : '0';
+	const autoplayParam = props.autoplay ? "1" : "0";
 
-	if (embedType.value === 'youtube') {
-		let videoId = '';
-		if (props.src.includes('youtu.be/')) {
-			videoId = props.src.split('youtu.be/')[1]?.split('?')[0];
-		} else if (props.src.includes('v=')) {
-			videoId = props.src.split('v=')[1]?.split('&')[0];
-		} else if (props.src.includes('embed/')) {
-			videoId = props.src.split('embed/')[1]?.split('?')[0];
+	if (embedType.value === "youtube") {
+		let videoId = "";
+		if (props.src.includes("youtu.be/")) {
+			videoId = props.src.split("youtu.be/")[1]?.split("?")[0];
+		} else if (props.src.includes("v=")) {
+			videoId = props.src.split("v=")[1]?.split("&")[0];
+		} else if (props.src.includes("embed/")) {
+			videoId = props.src.split("embed/")[1]?.split("?")[0];
 		}
 		return `https://www.youtube.com/embed/${videoId}?autoplay=${autoplayParam}&rel=0`;
 	}
 
-	if (embedType.value === 'vimeo') {
-		const videoId = props.src.split('vimeo.com/')[1]?.split('?')[0];
+	if (embedType.value === "vimeo") {
+		const videoId = props.src.split("vimeo.com/")[1]?.split("?")[0];
 		return `https://player.vimeo.com/video/${videoId}?autoplay=${autoplayParam}`;
 	}
 
@@ -198,6 +208,6 @@ const handleClose = () => {
 	if (videoRef.value) {
 		videoRef.value.pause();
 	}
-	emit('close');
+	emit("close");
 };
 </script>

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

@@ -39,17 +39,70 @@
 
 <script setup>
 const props = defineProps({
-	/** Array of plans to compare */
+	/** Array of plans to compare [{ id, name, price?, highlighted?, button? }] */
 	plans: {
 		type: Array,
-		required: true,
-		// Each plan: { id, name, price?, highlighted?, button? }
+		default: () => [
+			{
+				id: "starter",
+				name: "Starter",
+				price: "$9/mo",
+				button: { label: "Get Started" },
+			},
+			{
+				id: "pro",
+				name: "Pro",
+				price: "$29/mo",
+				highlighted: true,
+				button: { label: "Get Pro" },
+			},
+			{
+				id: "enterprise",
+				name: "Enterprise",
+				price: "$99/mo",
+				button: { label: "Contact Sales" },
+			},
+		],
 	},
-	/** Feature groups with features */
+	/** Feature groups with features [{ name?, features: [{ name, tooltip?, values: { [planId]: boolean|string } }] }] */
 	featureGroups: {
 		type: Array,
-		required: true,
-		// Each group: { name?, features: [{ name, tooltip?, values: { [planId]: boolean|string } }] }
+		default: () => [
+			{
+				name: "Core Features",
+				features: [
+					{
+						name: "Projects",
+						values: { starter: "5", pro: "Unlimited", enterprise: "Unlimited" },
+					},
+					{
+						name: "Storage",
+						values: { starter: "10GB", pro: "100GB", enterprise: "1TB" },
+					},
+					{
+						name: "Team members",
+						values: { starter: "1", pro: "10", enterprise: "Unlimited" },
+					},
+				],
+			},
+			{
+				name: "Support",
+				features: [
+					{
+						name: "Email support",
+						values: { starter: true, pro: true, enterprise: true },
+					},
+					{
+						name: "Priority support",
+						values: { starter: false, pro: true, enterprise: true },
+					},
+					{
+						name: "Dedicated manager",
+						values: { starter: false, pro: false, enterprise: true },
+					},
+				],
+			},
+		],
 	},
 	/** Caption for the table */
 	caption: {
@@ -64,18 +117,18 @@ const props = defineProps({
 	/** Position of badges */
 	badgesPosition: {
 		type: String,
-		default: 'bottom',
-		validator: (v) => ['top', 'bottom'].includes(v),
+		default: "bottom",
+		validator: (v) => ["top", "bottom"].includes(v),
 	},
 	/** Alignment of badges */
 	badgesAlign: {
 		type: String,
-		default: 'center',
-		validator: (v) => ['left', 'center', 'right'].includes(v),
+		default: "center",
+		validator: (v) => ["left", "center", "right"].includes(v),
 	},
 });
 
-const emit = defineEmits(['select']);
+const emit = defineEmits(["select"]);
 
 // Map XMark plans to Nuxt UI tiers format
 const mappedTiers = computed(() => {
@@ -85,12 +138,14 @@ const mappedTiers = computed(() => {
 		description: plan.description,
 		price: plan.price,
 		highlight: plan.highlighted,
-		button: plan.button ? {
-			label: plan.button.label || 'Get Started',
-			color: plan.highlighted ? 'primary' : 'neutral',
-			variant: plan.highlighted ? 'solid' : 'outline',
-			onClick: () => emit('select', plan),
-		} : undefined,
+		button: plan.button
+			? {
+					label: plan.button.label || "Get Started",
+					color: plan.highlighted ? "primary" : "neutral",
+					variant: plan.highlighted ? "solid" : "outline",
+					onClick: () => emit("select", plan),
+			  }
+			: undefined,
 	}));
 });
 
@@ -109,16 +164,16 @@ const mappedSections = computed(() => {
 // Badge alignment classes
 const badgesAlignClasses = computed(() => {
 	const alignments = {
-		left: 'justify-start',
-		center: 'justify-center',
-		right: 'justify-end',
+		left: "justify-start",
+		center: "justify-center",
+		right: "justify-end",
 	};
 	return alignments[props.badgesAlign];
 });
 
 // Get badge props (handles string presets and object configs)
 const getBadgeProps = (badge) => {
-	if (typeof badge === 'string') {
+	if (typeof badge === "string") {
 		return { preset: badge };
 	}
 	return badge;