@bagelink/blox 1.5.3

package/components/base/Button.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+/**
+ * Base Button Component
+ *
+ * A customizable button/link component
+ */
+
+interface Props {
+	btnTxt?: string
+	btnUrl?: string
+	btnTarget?: '_self' | '_blank' | '_parent' | '_top'
+	variant?: 'primary' | 'secondary' | 'outline' | 'ghost'
+	size?: 'sm' | 'md' | 'lg'
+	align?: 'left' | 'center' | 'right'
+	fullWidth?: boolean
+	isMobile?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	btnTxt: 'Click Me',
+	btnUrl: '#',
+	btnTarget: '_self',
+	variant: 'primary',
+	size: 'md',
+	align: 'left',
+	fullWidth: false,
+})
+
+function handleClick(e: MouseEvent) {
+	// Emit event for analytics tracking if needed
+	console.log('Button clicked:', props.btnTxt)
+}
+</script>
+
+<template>
+	<div :class="`button-wrapper align-${align}`">
+		<a
+			:href="btnUrl"
+			:target="btnTarget"
+			:rel="btnTarget === '_blank' ? 'noopener noreferrer' : undefined"
+			class="btn" :class="[
+				`btn-${variant}`,
+				`btn-${size}`,
+				{ 'btn-full-width': fullWidth },
+			]"
+			@click="handleClick"
+		>
+			{{ btnTxt }}
+		</a>
+	</div>
+</template>
+
+<style scoped>
+.button-wrapper {
+	display: flex;
+}
+
+.button-wrapper.align-left {
+	justify-content: flex-start;
+}
+
+.button-wrapper.align-center {
+	justify-content: center;
+}
+
+.button-wrapper.align-right {
+	justify-content: flex-end;
+}
+
+.btn {
+	display: inline-block;
+	padding: 0.75rem 1.5rem;
+	text-decoration: none;
+	border-radius: 6px;
+	font-weight: 500;
+	transition: all 0.2s;
+	cursor: pointer;
+	border: 2px solid transparent;
+	text-align: center;
+}
+
+.btn-full-width {
+	width: 100%;
+}
+
+/* Sizes */
+.btn-sm {
+	padding: 0.5rem 1rem;
+	font-size: 0.875rem;
+}
+
+.btn-md {
+	padding: 0.75rem 1.5rem;
+	font-size: 1rem;
+}
+
+.btn-lg {
+	padding: 1rem 2rem;
+	font-size: 1.125rem;
+}
+
+/* Variants */
+.btn-primary {
+	background: #3b82f6;
+	color: white;
+}
+
+.btn-primary:hover {
+	background: #2563eb;
+}
+
+.btn-secondary {
+	background: #6b7280;
+	color: white;
+}
+
+.btn-secondary:hover {
+	background: #4b5563;
+}
+
+.btn-outline {
+	background: transparent;
+	border-color: #3b82f6;
+	color: #3b82f6;
+}
+
+.btn-outline:hover {
+	background: #3b82f6;
+	color: white;
+}
+
+.btn-ghost {
+	background: transparent;
+	color: #3b82f6;
+}
+
+.btn-ghost:hover {
+	background: rgba(59, 130, 246, 0.1);
+}
+</style>

package/components/base/Container.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+/**
+ * Base Container Component
+ *
+ * A wrapper component for grouping other blocks
+ */
+
+interface Props {
+	maxWidth?: number | string
+	padding?: number | string
+	gap?: number // Gap between child elements in pixels
+	layout?: 'vertical' | 'horizontal' | 'grid'
+	columns?: number // For grid layout
+	isMobile?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	maxWidth: 1200,
+	padding: 20,
+	gap: 16,
+	layout: 'vertical',
+	columns: 3,
+})
+
+const containerStyle = {
+	maxWidth: typeof props.maxWidth === 'number' ? `${props.maxWidth}px` : props.maxWidth,
+	padding: typeof props.padding === 'number' ? `${props.padding}px` : props.padding,
+	gap: `${props.gap}px`,
+}
+</script>
+
+<template>
+	<div class="container" :class="[`layout-${layout}`]" :style="containerStyle">
+		<slot />
+	</div>
+</template>
+
+<style scoped>
+.container {
+	margin: 0 auto;
+}
+
+.layout-vertical {
+	display: flex;
+	flex-direction: column;
+}
+
+.layout-horizontal {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+.layout-grid {
+	display: grid;
+	grid-template-columns: repeat(v-bind(columns), 1fr);
+}
+
+@media (max-width: 768px) {
+	.layout-grid {
+		grid-template-columns: 1fr;
+	}
+}
+</style>

package/components/base/Image.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+/**
+ * Base Image Component
+ *
+ * Displays an image with optional link and captions
+ */
+
+interface Props {
+	src?: string
+	alt?: string
+	caption?: string
+	link?: string
+	linkTarget?: '_self' | '_blank' | '_parent' | '_top'
+	objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
+	aspectRatio?: string // e.g., '16/9', '4/3', '1/1'
+	isMobile?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	src: '',
+	alt: '',
+	caption: '',
+	link: '',
+	linkTarget: '_self',
+	objectFit: 'cover',
+	aspectRatio: 'auto',
+})
+
+const imageStyle = {
+	objectFit: props.objectFit,
+	aspectRatio: props.aspectRatio,
+}
+</script>
+
+<template>
+	<figure class="image-wrapper">
+		<a
+			v-if="link"
+			:href="link"
+			:target="linkTarget"
+			:rel="linkTarget === '_blank' ? 'noopener noreferrer' : undefined"
+			class="image-link"
+		>
+			<img :src="src" :alt="alt" :style="imageStyle" class="image">
+		</a>
+		<img v-else :src="src" :alt="alt" :style="imageStyle" class="image">
+		<figcaption v-if="caption" class="image-caption">
+			{{ caption }}
+		</figcaption>
+	</figure>
+</template>
+
+<style scoped>
+.image-wrapper {
+	margin: 0;
+	padding: 0;
+}
+
+.image-link {
+	display: block;
+}
+
+.image {
+	width: 100%;
+	height: auto;
+	display: block;
+}
+
+.image-caption {
+	margin-top: 0.5rem;
+	font-size: 0.875rem;
+	color: #6b7280;
+	text-align: center;
+}
+</style>

package/components/base/Spacer.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+/**
+ * Base Spacer Component
+ *
+ * Creates vertical spacing between blocks
+ */
+
+interface Props {
+	height?: number | string // Height in pixels or 'auto'
+	heightMobile?: number | string
+	isMobile?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	height: 40,
+	heightMobile: undefined,
+})
+
+function computedHeight() {
+	const h = props.isMobile && props.heightMobile ? props.heightMobile : props.height
+	return typeof h === 'number' ? `${h}px` : h
+}
+</script>
+
+<template>
+	<div class="spacer" :style="{ height: computedHeight() }" />
+</template>
+
+<style scoped>
+.spacer {
+	width: 100%;
+}
+</style>

package/components/base/Text.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+/**
+ * Base Text Component
+ *
+ * A simple text/paragraph component for displaying rich content
+ */
+
+interface Props {
+	content?: string
+	tag?: 'p' | 'div' | 'span' | 'article' | 'section'
+	align?: 'left' | 'center' | 'right' | 'justify'
+}
+
+const { content = '', tag = 'div', align = 'left' } = defineProps<Props>()
+</script>
+
+<template>
+	<component :is="tag" :class="`text-align-${align}`" v-html="content" />
+</template>
+
+<style scoped>
+.text-align-left {
+	text-align: left;
+}
+
+.text-align-center {
+	text-align: center;
+}
+
+.text-align-right {
+	text-align: right;
+}
+
+.text-align-justify {
+	text-align: justify;
+}
+</style>

package/components/base/Title.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+/**
+ * Base Title Component
+ *
+ * Renders headings with customizable tag and styling
+ */
+
+interface Props {
+	title?: string
+	subTitle?: string
+	tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+	align?: 'left' | 'center' | 'right'
+}
+
+const { title = '', subTitle = '', tag = 'h2', align = 'left' } = defineProps<Props>()
+</script>
+
+<template>
+	<div :class="`title-wrapper text-align-${align}`">
+		<component :is="tag" v-if="title" class="title">
+			{{ title }}
+		</component>
+		<p v-if="subTitle" class="subtitle">
+			{{ subTitle }}
+		</p>
+	</div>
+</template>
+
+<style scoped>
+.title-wrapper {
+	margin-bottom: 1rem;
+}
+
+.title {
+	margin: 0 0 0.5rem 0;
+	line-height: 1.2;
+}
+
+.subtitle {
+	margin: 0;
+	opacity: 0.8;
+}
+
+.text-align-left {
+	text-align: left;
+}
+
+.text-align-center {
+	text-align: center;
+}
+
+.text-align-right {
+	text-align: right;
+}
+</style>

package/components/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Component Exports
+ *
+ * Export all base components for easy importing
+ */
+
+export { default as Button } from './base/Button.vue'
+export * from './base/Button.vue'
+export { default as Container } from './base/Container.vue'
+export * from './base/Container.vue'
+export { default as Image } from './base/Image.vue'
+export * from './base/Image.vue'
+
+export { default as Spacer } from './base/Spacer.vue'
+export * from './base/Spacer.vue'
+export { default as Text } from './base/Text.vue'
+// Re-export for convenience
+export * from './base/Text.vue'
+export { default as Title } from './base/Title.vue'
+export * from './base/Title.vue'