@katlux/block-ecommerce 0.1.0-beta.0

package/build.config.ts

@@ -0,0 +1,4 @@
+export default {
+	failOnWarn: false,
+	externals: ['#app', '@katlux/toolkit', '@katlux/providers']
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+	"name": "@katlux/block-ecommerce",
+	"version": "0.1.0-beta.0",
+	"description": "Pre-built eCommerce block components for Katlux toolkit",
+	"author": "Katlux",
+	"license": "MIT",
+	"publishConfig": {
+		"access": "public"
+	},
+	"main": "./dist/module.mjs",
+	"scripts": {
+		"build": "nuxt-module-build build",
+		"dev": "nuxt-module-build build --stub"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/types.d.ts",
+			"import": "./dist/module.mjs",
+			"require": "./dist/module.cjs"
+		},
+		"./package.json": "./package.json",
+		"./components/*": "./dist/runtime/components/*"
+	},
+	"dependencies": {
+		"@katlux/providers": "*",
+		"@katlux/toolkit": "*",
+		"@nuxt/kit": "^3.20.1",
+		"pug": "^3.0.0",
+		"sass": "^1.80.0"
+	}
+}

package/src/module.ts

@@ -0,0 +1,25 @@
+import { defineNuxtModule, createResolver, addComponentsDir } from '@nuxt/kit'
+
+export interface ModuleOptions { }
+
+export default defineNuxtModule<ModuleOptions>({
+	meta: {
+		name: '@katlux/block-ecommerce',
+		configKey: 'katluxEcommerceBlocks',
+		compatibility: {
+			nuxt: '^3.0.0'
+		}
+	},
+	defaults: {},
+	async setup(options, nuxt) {
+		const resolver = createResolver(import.meta.url)
+
+		// Add components directory
+		addComponentsDir({
+			path: resolver.resolve('./runtime/components'),
+			pathPrefix: false,
+			prefix: '',
+			global: true
+		})
+	}
+})

package/src/runtime/components/KProductList/KProductList.logic.ts

@@ -0,0 +1,64 @@
+import type { ADataProvider, KProductItemData, KProductRowAction } from '@katlux/providers'
+import { computed, type PropType } from 'vue'
+
+export interface KProductListProps {
+	dataProvider: ADataProvider
+	layout?: 'grid' | 'list'
+	rowActions?: KProductRowAction[]
+	gridColumns?: number | string
+	gap?: string
+}
+
+export const KProductListDefaultProps = {
+	dataProvider: {
+		type: Object as PropType<ADataProvider>,
+		required: true,
+	},
+	layout: {
+		type: String as PropType<'grid' | 'list'>,
+		default: 'grid',
+	},
+	rowActions: {
+		type: Array as PropType<KProductRowAction[]>,
+		default: () => [],
+	},
+	gridColumns: {
+		type: [Number, String],
+		default: 4,
+	},
+	gap: {
+		type: String,
+		default: '1rem',
+	}
+}
+
+export function useKProductListLogic(props: KProductListProps) {
+	const isGrid = computed(() => props.layout !== 'list')
+
+	const gridStyles = computed(() => {
+		if (!isGrid.value) return {}
+
+		const cols = props.gridColumns
+		return {
+			display: 'grid',
+			gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+			gap: props.gap
+		}
+	})
+
+	const listStyles = computed(() => {
+		if (isGrid.value) return {}
+
+		return {
+			display: 'flex',
+			flexDirection: 'column' as const,
+			gap: props.gap
+		}
+	})
+
+	return {
+		isGrid,
+		gridStyles,
+		listStyles
+	}
+}

package/src/runtime/components/KProductList/KProductList.vue

@@ -0,0 +1,70 @@
+<template>
+<div class="k-product-list" :class="{ 'is-grid': isGrid, 'is-list': !isGrid }">
+	<!-- If there's a custom template provided via default slot -->
+	<template v-if="$slots.default">
+		<div class="list-container" :style="isGrid ? gridStyles : listStyles">
+			<slot v-for="(item, index) in props.dataProvider.pageData.value" :item="item" :index="index"></slot>
+		</div>
+	</template>
+
+	<!-- Otherwise, use the default KProductListItem -->
+	<template v-else>
+		<div class="list-container" :style="isGrid ? gridStyles : listStyles">
+			<KProductListItem
+				v-for="(item, index) in props.dataProvider.pageData.value" 
+				:key="item.id || index"
+				:item="item"
+				:row-actions="rowActions"
+			>
+				<template v-for="(_, slot) in $slots" #[slot]="scope">
+					<slot :name="slot" v-bind="scope"></slot>
+				</template>
+			</KProductListItem>
+		</div>
+	</template>
+
+	<div class="footer">
+		<KPagination class="pagination" :dataProvider="props.dataProvider" />
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import type { KProductItemData, KProductRowAction } from '@katlux/providers'
+import { ADataProvider } from '@katlux/providers'
+import { useKProductListLogic } from './KProductList.logic'
+
+const props = withDefaults(defineProps<{
+	dataProvider: ADataProvider
+	layout?: 'grid' | 'list'
+	rowActions?: KProductRowAction[]
+	gridColumns?: number | string
+	gap?: string
+}>(), {
+	layout: 'grid',
+	rowActions: () => [],
+	gridColumns: 4,
+	gap: '1rem'
+})
+
+const { isGrid, gridStyles, listStyles } = useKProductListLogic(props as any)
+</script>
+
+<style lang="scss" scoped>
+.k-product-list {
+	width: 100%;
+	
+	.list-container {
+		width: 100%;
+	}
+
+	.footer {
+		display: flex;
+		justify-content: flex-end;
+		margin-top: var(--gap-lg, 24px);
+		.pagination {
+			flex: 1;
+		}
+	}
+}
+</style>

package/src/runtime/components/KProductListItem/KProductListItem.logic.ts

@@ -0,0 +1,36 @@
+import { computed, type PropType } from 'vue'
+import type { KProductItemData, KProductRowAction } from '@katlux/providers'
+
+
+export interface KProductListItemProps {
+	item: KProductItemData
+	rowActions?: KProductRowAction[]
+}
+
+export const KProductListItemDefaultProps = {
+	item: {
+		type: Object as PropType<KProductItemData>,
+		required: true as const,
+	},
+	rowActions: {
+		type: Array as PropType<KProductRowAction[]>,
+		default: () => [],
+	},
+}
+
+export function useKProductListItemLogic(props: KProductListItemProps) {
+	const hasActions = computed(() => props.rowActions && props.rowActions.length > 0)
+
+	const formattedPrice = computed(() => {
+		if (props.item.price === undefined) return ''
+		return new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: props.item.currency || 'USD'
+		}).format(props.item.price)
+	})
+
+	return {
+		hasActions,
+		formattedPrice
+	}
+}

package/src/runtime/components/KProductListItem/KProductListItem.vue

@@ -0,0 +1,129 @@
+<template lang="pug">
+.k-product-list-item
+	.item-image(v-if="item.image")
+		img(:src="item.image" :alt="item.title")
+	.item-image-placeholder(v-else)
+		KIcon(name="tabler:photo" class="placeholder-icon")
+	.item-details
+		h3.item-title {{ item.title }}
+		p.item-description(v-if="item.description") {{ item.description }}
+		.item-price(v-if="formattedPrice") {{ formattedPrice }}
+	.item-actions(v-if="hasActions")
+		KButton(
+			v-for="(action, index) in rowActions" 
+			:key="index" 
+			:class="action.color || 'primary'" 
+			@click="action.action(item)"
+		) 
+			template(v-if="action.icon" #icon)
+				KIcon(:name="action.icon")
+			| {{ action.label }}
+</template>
+
+<script lang="ts" setup>
+import type { KProductItemData, KProductRowAction } from '@katlux/providers'
+
+const props = defineProps<{
+	item: KProductItemData
+	rowActions?: KProductRowAction[]
+}>()
+
+import { useKProductListItemLogic } from './KProductListItem.logic'
+const { hasActions, formattedPrice } = useKProductListItemLogic(props)
+</script>
+
+<style lang="scss" scoped>
+.k-product-list-item {
+	display: flex;
+	flex-direction: column;
+	border: 1px solid var(--border-color-light, #e9ecef);
+	border-radius: var(--border-radius-md, 8px);
+	overflow: hidden;
+	background: var(--bg-color-surface, #ffffff);
+	transition: box-shadow 0.2s ease, transform 0.2s ease;
+	height: 100%;
+	
+	&:hover {
+		box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08));
+		transform: translateY(-2px);
+	}
+
+	.item-image, .item-image-placeholder {
+		width: 100%;
+		aspect-ratio: 1;
+		overflow: hidden;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--bg-color-muted, #f8f9fa);
+		border-bottom: 1px solid var(--border-color-light, #e9ecef);
+	}
+
+	.item-image img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		transition: transform 0.3s ease;
+	}
+
+	&:hover .item-image img {
+		transform: scale(1.05);
+	}
+
+	.item-image-placeholder {
+		.placeholder-icon {
+			font-size: 3rem;
+			color: var(--text-color-muted, #adb5bd);
+			opacity: 0.5;
+		}
+	}
+
+	.item-details {
+		padding: var(--gap-md, 16px);
+		flex-grow: 1;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.item-title {
+		margin: 0 0 var(--gap-xs, 4px) 0;
+		font-size: var(--font-size-lg, 1.1rem);
+		font-weight: 600;
+		color: var(--text-color-primary, #212529);
+		line-height: 1.3;
+	}
+
+	.item-description {
+		margin: 0 0 var(--gap-sm, 8px) 0;
+		font-size: var(--font-size-sm, 0.9rem);
+		color: var(--text-color-secondary, #6c757d);
+		line-height: 1.4;
+		flex-grow: 1;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	.item-price {
+		font-size: var(--font-size-xl, 1.25rem);
+		font-weight: 700;
+		color: var(--color-primary, #0d6efd);
+		margin-top: auto;
+		padding-top: var(--gap-sm, 8px);
+	}
+
+	.item-actions {
+		padding: var(--gap-md, 16px);
+		padding-top: 0;
+		display: flex;
+		gap: var(--gap-sm, 8px);
+		flex-wrap: wrap;
+		
+		:deep(.KButton) {
+			flex: 1;
+			min-width: 100px;
+		}
+	}
+}
+</style>