@katlux/block-ecommerce 0.1.1-alpha.95 → 0.1.1-alpha.97

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.1-alpha.95",
+  "version": "0.1.1-alpha.97",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/KProductList/KProductList.d.vue.ts

@@ -1,4 +1,4 @@
-import type { KProductItemData, KProductRowAction } from '@katlux/providers';
+import type { KProductRowAction } from '@katlux/providers';
 import { ADataProvider } from '@katlux/providers';
 type __VLS_Props = {
     dataProvider: ADataProvider;
@@ -10,23 +10,12 @@ type __VLS_Props = {
     emptyText?: string;
     currentPage?: number;
     pageSize?: number;
+    virtualScroll?: boolean;
+    itemHeight?: number;
+    viewportHeight?: number;
+    buffer?: number;
 };
-declare var __VLS_1: {
-    loading: true;
-}, __VLS_3: {}, __VLS_5: {
-    item: KProductItemData;
-    index: number;
-}, __VLS_15: string, __VLS_16: any;
-type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any;
-} & {
-    loading?: (props: typeof __VLS_1) => any;
-} & {
-    empty?: (props: typeof __VLS_3) => any;
-} & {
-    default?: (props: typeof __VLS_5) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:currentPage": (page: number) => any;
     "update:pageSize": (size: number) => any;
     "page-change": (page: number) => any;
@@ -37,18 +26,16 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     currentPage: number;
     pageSize: number;
+    buffer: number;
     layout: "grid" | "list";
     rowActions: KProductRowAction[];
     gridColumns: number | string;
     gap: string;
     locale: string;
     emptyText: string;
+    virtualScroll: boolean;
+    itemHeight: number;
+    viewportHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/KProductList/KProductList.logic.d.ts

@@ -10,6 +10,10 @@ export interface KProductListProps {
     emptyText?: string;
     currentPage?: number;
     pageSize?: number;
+    virtualScroll?: boolean;
+    itemHeight?: number;
+    viewportHeight?: number;
+    buffer?: number;
 }
 export type KProductListEmits = {
     (e: 'update:currentPage', page: number): void;
@@ -53,6 +57,22 @@ export declare const KProductListDefaultProps: {
         type: NumberConstructor;
         default: undefined;
     };
+    virtualScroll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    itemHeight: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    viewportHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    buffer: {
+        type: NumberConstructor;
+        default: number;
+    };
 };
 export declare function useKProductListLogic(props: KProductListProps, emit?: KProductListEmits): {
     isGrid: import("vue").ComputedRef<boolean>;

package/dist/runtime/components/KProductList/KProductList.logic.js

@@ -36,6 +36,22 @@ export const KProductListDefaultProps = {
   pageSize: {
     type: Number,
     default: void 0
+  },
+  virtualScroll: {
+    type: Boolean,
+    default: false
+  },
+  itemHeight: {
+    type: Number,
+    default: void 0
+  },
+  viewportHeight: {
+    type: Number,
+    default: 600
+  },
+  buffer: {
+    type: Number,
+    default: 2
   }
 };
 export function useKProductListLogic(props, emit) {
@@ -50,16 +66,21 @@ export function useKProductListLogic(props, emit) {
     setCurrentPage,
     setPageSize
   } = useDataProvider(() => props.dataProvider);
-  watch(() => props.currentPage, (val) => {
-    if (val !== void 0 && val !== dpCurrentPage.value) {
-      setCurrentPage(val);
+  watch([() => props.currentPage, () => props.pageSize], ([page, size]) => {
+    if (size !== void 0 && size !== dpPageSize.value) {
+      const targetPage = page !== void 0 ? page : dpCurrentPage.value;
+      if (typeof props.dataProvider?.setPageSize === "function") {
+        props.dataProvider.setPageSize(size, false);
+        if (targetPage !== dpCurrentPage.value) {
+          setCurrentPage(targetPage);
+        }
+      } else {
+        setPageSize(size);
+      }
+    } else if (page !== void 0 && page !== dpCurrentPage.value) {
+      setCurrentPage(page);
     }
-  });
-  watch(() => props.pageSize, (val) => {
-    if (val !== void 0 && val !== dpPageSize.value) {
-      setPageSize(val);
-    }
-  });
+  }, { immediate: true });
   watch(dpCurrentPage, (val) => {
     emit?.("update:currentPage", val);
     emit?.("page-change", val);

package/dist/runtime/components/KProductList/KProductList.vue

@@ -1,70 +1,77 @@
-<template>
-<div class="k-product-list" :class="{ 'is-grid': isGrid, 'is-list': !isGrid }" :style="containerVars">
-	<!-- Loading state -->
-	<div v-if="loading" class="loading-container">
-		<slot name="loading" :loading="loading">
-			<div class="list-container">
-				<div v-for="i in skeletonCount" :key="i" class="k-product-skeleton-card">
-					<div class="skeleton-image"></div>
-					<div class="skeleton-details">
-						<div class="skeleton-line skeleton-title"></div>
-						<div class="skeleton-line skeleton-price"></div>
-					</div>
-				</div>
-			</div>
-		</slot>
-	</div>
+<template lang="pug">
+.k-product-list(:class="{ 'is-grid': isGrid, 'is-list': !isGrid, 'is-virtual-scroll': props.virtualScroll }" :style="containerVars")
+	//- Loading state
+	.loading-container(v-if="loading")
+		slot(name="loading" :loading="loading")
+			.list-container
+				.k-product-skeleton-card(v-for="i in skeletonCount" :key="i")
+					.skeleton-image
+					.skeleton-details
+						.skeleton-line.skeleton-title
+						.skeleton-line.skeleton-price
 
-	<!-- Empty state -->
-	<div v-else-if="pageRows.length === 0" class="empty-container">
-		<slot name="empty">
-			<div class="k-product-empty-state">
-				<p class="empty-message">{{ props.emptyText || t("No products found") }}</p>
-			</div>
-		</slot>
-	</div>
+	//- Empty state
+	.empty-container(v-else-if="isEmpty")
+		slot(name="empty")
+			.k-product-empty-state
+				p.empty-message {{ props.emptyText || t('No products found') }}
 
-	<!-- If there's a custom template provided via default slot -->
-	<template v-else-if="$slots.default">
-		<div class="list-container">
-			<slot v-for="(item, index) in pageRows" :item="item" :index="index"></slot>
-		</div>
-	</template>
+	//- Virtual scrolling mode
+	.k-product-virtual-container(
+		v-else-if="props.virtualScroll"
+		ref="containerRef"
+		tabindex="0"
+		role="feed"
+		aria-busy="false"
+		:style="containerCssVars"
+		@scroll.passive="onScroll"
+		@keydown.down.prevent="onKeyDownDown"
+		@keydown.up.prevent="onKeyDownUp"
+	)
+		.k-virtual-spacer.is-top(aria-hidden="true")
+		.list-container
+			template(v-if="$slots.default")
+				slot(v-for="(item, index) in displayProducts" :item="item" :index="startIndex + index")
+			template(v-else)
+				KProductListItem(
+					v-for="(item, index) in displayProducts"
+					:key="item.id || (startIndex + index)"
+					:item="item"
+					:row-actions="rowActions"
+					:locale="props.locale"
+				)
+					template(v-for="(_, slot) in $slots" #[slot]="scope")
+						slot(:name="slot" v-bind="scope")
+		.k-virtual-spacer.is-bottom(aria-hidden="true")
 
-	<!-- Otherwise, use the default KProductListItem -->
-	<template v-else>
-		<div class="list-container">
-			<KProductListItem
-				v-for="(item, index) in pageRows" 
+	//- Traditional paginated mode
+	template(v-else)
+		.list-container(v-if="$slots.default")
+			slot(v-for="(item, index) in pageRows" :item="item" :index="index")
+		.list-container(v-else)
+			KProductListItem(
+				v-for="(item, index) in pageRows"
 				:key="item.id || index"
 				:item="item"
 				:row-actions="rowActions"
 				:locale="props.locale"
-			>
-				<template v-for="(_, slot) in $slots" #[slot]="scope">
-					<slot :name="slot" v-bind="scope"></slot>
-				</template>
-			</KProductListItem>
-		</div>
-	</template>
+			)
+				template(v-for="(_, slot) in $slots" #[slot]="scope")
+					slot(:name="slot" v-bind="scope")
 
-	<div class="footer" v-if="!loading && pageRows.length > 0">
-		<KPagination
-			class="pagination"
+	.footer(v-if="!loading && !isEmpty && !props.virtualScroll")
+		KPagination.pagination(
 			:dataProvider="props.dataProvider"
-			:currentPage="props.currentPage"
-			:pageSize="props.pageSize"
 			@update:currentPage="emit('update:currentPage', $event)"
 			@update:pageSize="emit('update:pageSize', $event)"
-		/>
-	</div>
-</div>
+		)
 </template>
 
 <script setup>
 import { computed } from "vue";
 import { ADataProvider } from "@katlux/providers";
 import { useKatluxI18n } from "#toolkit/composables/useKatluxI18n";
+import { useVirtualScroll } from "#toolkit/composables/useVirtualScroll";
 import { useKProductListLogic } from "./KProductList.logic";
 const { t } = useKatluxI18n();
 const emit = defineEmits(["update:currentPage", "update:pageSize", "page-change"]);
@@ -77,7 +84,11 @@ const props = defineProps({
   locale: { type: String, required: false, default: void 0 },
   emptyText: { type: String, required: false, default: void 0 },
   currentPage: { type: Number, required: false, default: void 0 },
-  pageSize: { type: Number, required: false, default: void 0 }
+  pageSize: { type: Number, required: false, default: void 0 },
+  virtualScroll: { type: Boolean, required: false, default: false },
+  itemHeight: { type: Number, required: false, default: void 0 },
+  viewportHeight: { type: Number, required: false, default: 600 },
+  buffer: { type: Number, required: false, default: 2 }
 });
 const { isGrid, pageRows, loading } = useKProductListLogic(props, emit);
 const skeletonCount = computed(() => Number(props.gridColumns) || 4);
@@ -85,6 +96,73 @@ const containerVars = computed(() => ({
   "--k-product-grid-cols": String(props.gridColumns),
   "--k-product-gap": props.gap
 }));
+const productItems = computed(() => {
+  const currentRows = pageRows.value;
+  const dp = props.dataProvider;
+  if (props.virtualScroll) {
+    if (Array.isArray(dp?.rowMap)) return dp.rowMap;
+    if (Array.isArray(dp?.rowMap?.value)) return dp.rowMap.value;
+    if (Array.isArray(dp?.allVisibleRows)) return dp.allVisibleRows;
+    if (Array.isArray(dp?.allVisibleRows?.value)) return dp.allVisibleRows.value;
+    if (Array.isArray(dp?.allData?.value)) return dp.allData.value;
+    if (Array.isArray(dp?.allData)) return dp.allData;
+    if (Array.isArray(dp?.data)) return dp.data;
+  }
+  return currentRows;
+});
+const columnsCount = computed(() => isGrid.value ? Number(props.gridColumns) || 4 : 1);
+const effectiveItemHeight = computed(() => {
+  if (typeof props.itemHeight === "number" && props.itemHeight > 0) return props.itemHeight;
+  return isGrid.value ? 350 : 140;
+});
+const {
+  visibleItems,
+  startIndex,
+  endIndex,
+  topSpacerHeight,
+  bottomSpacerHeight,
+  containerRef,
+  onScroll,
+  scrollToIndex,
+  containerCssVars
+} = useVirtualScroll({
+  items: productItems,
+  itemHeight: effectiveItemHeight,
+  containerHeight: props.viewportHeight || 600,
+  columns: columnsCount,
+  buffer: props.buffer ?? 2,
+  virtualScroll: computed(() => !!props.virtualScroll),
+  onThresholdReach: () => {
+    const dp = props.dataProvider;
+    if (typeof dp?.loadMore === "function") {
+      dp.loadMore();
+    } else if (typeof dp?.nextPage === "function" && dp.hasMore) {
+      dp.nextPage();
+    }
+  }
+});
+const displayProducts = computed(() => {
+  if (props.virtualScroll) {
+    return visibleItems.value;
+  }
+  return pageRows.value;
+});
+const isEmpty = computed(() => {
+  if (props.virtualScroll) {
+    return productItems.value.length === 0;
+  }
+  return pageRows.value.length === 0;
+});
+const onKeyDownDown = () => {
+  if (containerRef.value) {
+    containerRef.value.scrollTop += effectiveItemHeight.value;
+  }
+};
+const onKeyDownUp = () => {
+  if (containerRef.value) {
+    containerRef.value.scrollTop = Math.max(0, containerRef.value.scrollTop - effectiveItemHeight.value);
+  }
+};
 </script>
 
 <style scoped>
@@ -104,6 +182,26 @@ const containerVars = computed(() => ({
   flex-direction: column;
   gap: var(--k-product-gap, 1rem);
 }
+.k-product-list .k-product-virtual-container {
+  overflow-y: auto;
+  max-height: var(--virtual-container-height, 600px);
+  position: relative;
+  width: 100%;
+}
+.k-product-list .k-product-virtual-container:focus-visible {
+  outline: 2px solid var(--primary-color, #3b82f6);
+  outline-offset: -2px;
+}
+.k-product-list .k-product-virtual-container .k-virtual-spacer {
+  width: 100%;
+  flex-shrink: 0;
+}
+.k-product-list .k-product-virtual-container .k-virtual-spacer.is-top {
+  height: var(--virtual-spacer-top, 0px);
+}
+.k-product-list .k-product-virtual-container .k-virtual-spacer.is-bottom {
+  height: var(--virtual-spacer-bottom, 0px);
+}
 .k-product-list .k-product-empty-state {
   display: flex;
   align-items: center;

package/dist/runtime/components/KProductList/KProductList.vue.d.ts

@@ -1,4 +1,4 @@
-import type { KProductItemData, KProductRowAction } from '@katlux/providers';
+import type { KProductRowAction } from '@katlux/providers';
 import { ADataProvider } from '@katlux/providers';
 type __VLS_Props = {
     dataProvider: ADataProvider;
@@ -10,23 +10,12 @@ type __VLS_Props = {
     emptyText?: string;
     currentPage?: number;
     pageSize?: number;
+    virtualScroll?: boolean;
+    itemHeight?: number;
+    viewportHeight?: number;
+    buffer?: number;
 };
-declare var __VLS_1: {
-    loading: true;
-}, __VLS_3: {}, __VLS_5: {
-    item: KProductItemData;
-    index: number;
-}, __VLS_15: string, __VLS_16: any;
-type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any;
-} & {
-    loading?: (props: typeof __VLS_1) => any;
-} & {
-    empty?: (props: typeof __VLS_3) => any;
-} & {
-    default?: (props: typeof __VLS_5) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:currentPage": (page: number) => any;
     "update:pageSize": (size: number) => any;
     "page-change": (page: number) => any;
@@ -37,18 +26,16 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     currentPage: number;
     pageSize: number;
+    buffer: number;
     layout: "grid" | "list";
     rowActions: KProductRowAction[];
     gridColumns: number | string;
     gap: string;
     locale: string;
     emptyText: string;
+    virtualScroll: boolean;
+    itemHeight: number;
+    viewportHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@katlux/block-ecommerce",
-	"version": "0.1.1-alpha.95",
+	"version": "0.1.1-alpha.97",
 	"description": "Pre-built eCommerce block components for Katlux toolkit",
 	"author": "Katlux",
 	"license": "Apache-2.0",
@@ -23,8 +23,8 @@
 		"./components/*": "./dist/runtime/components/*"
 	},
 	"dependencies": {
-		"@katlux/providers": "^0.1.1-alpha.100",
-		"@katlux/toolkit": "^0.1.1-alpha.111",
+		"@katlux/providers": "^0.1.1-alpha.106",
+		"@katlux/toolkit": "^0.1.1-alpha.120",
 		"@nuxt/kit": "^3.12.0",
 		"pug": "^3.0.0",
 		"sass": "^1.80.0"