@katlux/block-ecommerce 0.1.1-alpha.93 → 0.1.1-alpha.94

package/dist/module.json

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

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

@@ -7,22 +7,30 @@ type __VLS_Props = {
     gridColumns?: number | string;
     gap?: string;
     locale?: string;
+    emptyText?: string;
 };
 declare var __VLS_1: {
+    loading: true;
+}, __VLS_3: {}, __VLS_5: {
     item: KProductItemData;
     index: number;
-}, __VLS_11: string, __VLS_12: any;
+}, __VLS_15: string, __VLS_16: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
+    [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any;
 } & {
-    default?: (props: typeof __VLS_1) => 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, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    layout: "grid" | "list";
     rowActions: KProductRowAction[];
+    locale: string;
+    layout: "grid" | "list";
     gridColumns: number | string;
     gap: string;
-    locale: string;
+    emptyText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -32,24 +32,6 @@ export declare const KProductListDefaultProps: {
 };
 export declare function useKProductListLogic(props: KProductListProps): {
     isGrid: import("vue").ComputedRef<boolean>;
-    gridStyles: import("vue").ComputedRef<{
-        display?: undefined;
-        gridTemplateColumns?: undefined;
-        gap?: undefined;
-    } | {
-        display: string;
-        gridTemplateColumns: string;
-        gap: string | undefined;
-    }>;
-    listStyles: import("vue").ComputedRef<{
-        display?: undefined;
-        flexDirection?: undefined;
-        gap?: undefined;
-    } | {
-        display: string;
-        flexDirection: "column";
-        gap: string | undefined;
-    }>;
     pageRows: import("vue").ComputedRef<KProductItemData[]>;
     loading: import("vue").Ref<boolean, boolean>;
     initialLoad: import("vue").Ref<boolean, boolean>;

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

@@ -24,29 +24,10 @@ export const KProductListDefaultProps = {
 };
 export function useKProductListLogic(props) {
   const isGrid = computed(() => props.layout !== "list");
-  const { pageData, loading, initialLoad, rowCount } = useDataProvider(props.dataProvider);
+  const { pageData, loading, initialLoad, rowCount } = useDataProvider(() => props.dataProvider);
   const pageRows = computed(() => pageData.value || []);
-  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",
-      gap: props.gap
-    };
-  });
   return {
     isGrid,
-    gridStyles,
-    listStyles,
     pageRows,
     loading,
     initialLoad,

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

@@ -1,7 +1,31 @@
 <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>
+
+	<!-- 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>
+
 	<!-- If there's a custom template provided via default slot -->
-	<template v-if="$slots.default">
+	<template v-else-if="$slots.default">
 		<div class="list-container">
 			<slot v-for="(item, index) in pageRows" :item="item" :index="index"></slot>
 		</div>
@@ -24,7 +48,7 @@
 		</div>
 	</template>
 
-	<div class="footer">
+	<div class="footer" v-if="!loading && pageRows.length > 0">
 		<KPagination class="pagination" :dataProvider="props.dataProvider" />
 	</div>
 </div>
@@ -33,16 +57,20 @@
 <script setup>
 import { computed } from "vue";
 import { ADataProvider } from "@katlux/providers";
+import { useKatluxI18n } from "#toolkit/composables/useKatluxI18n";
 import { useKProductListLogic } from "./KProductList.logic";
+const { t } = useKatluxI18n();
 const props = defineProps({
   dataProvider: { type: Object, required: true },
   layout: { type: String, required: false, default: "grid" },
   rowActions: { type: Array, required: false, default: () => [] },
   gridColumns: { type: [Number, String], required: false, default: 4 },
   gap: { type: String, required: false, default: "1rem" },
-  locale: { type: String, required: false, default: void 0 }
+  locale: { type: String, required: false, default: void 0 },
+  emptyText: { type: String, required: false, default: void 0 }
 });
-const { isGrid, gridStyles, listStyles, pageRows, loading } = useKProductListLogic(props);
+const { isGrid, pageRows, loading } = useKProductListLogic(props);
+const skeletonCount = computed(() => Number(props.gridColumns) || 4);
 const containerVars = computed(() => ({
   "--k-product-grid-cols": String(props.gridColumns),
   "--k-product-gap": props.gap
@@ -66,6 +94,57 @@ const containerVars = computed(() => ({
   flex-direction: column;
   gap: var(--k-product-gap, 1rem);
 }
+.k-product-list .k-product-empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1rem;
+  color: var(--text-color-muted, #6c757d);
+  font-size: 1rem;
+}
+.k-product-list .k-product-skeleton-card {
+  border: 1px solid var(--border-color-light, #e9ecef);
+  border-radius: var(--border-radius-md, 8px);
+  overflow: hidden;
+  background: var(--bg-color-surface, #ffffff);
+  display: flex;
+  flex-direction: column;
+}
+.k-product-list .k-product-skeleton-card .skeleton-image {
+  width: 100%;
+  aspect-ratio: 1;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s infinite;
+}
+.k-product-list .k-product-skeleton-card .skeleton-details {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.k-product-list .k-product-skeleton-card .skeleton-details .skeleton-line {
+  height: 14px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s infinite;
+}
+.k-product-list .k-product-skeleton-card .skeleton-details .skeleton-line.skeleton-title {
+  width: 70%;
+}
+.k-product-list .k-product-skeleton-card .skeleton-details .skeleton-line.skeleton-price {
+  width: 40%;
+  height: 16px;
+}
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
 .k-product-list .footer {
   display: flex;
   justify-content: flex-end;

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

@@ -7,22 +7,30 @@ type __VLS_Props = {
     gridColumns?: number | string;
     gap?: string;
     locale?: string;
+    emptyText?: string;
 };
 declare var __VLS_1: {
+    loading: true;
+}, __VLS_3: {}, __VLS_5: {
     item: KProductItemData;
     index: number;
-}, __VLS_11: string, __VLS_12: any;
+}, __VLS_15: string, __VLS_16: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
+    [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any;
 } & {
-    default?: (props: typeof __VLS_1) => 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, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    layout: "grid" | "list";
     rowActions: KProductRowAction[];
+    locale: string;
+    layout: "grid" | "list";
     gridColumns: number | string;
     gap: string;
-    locale: string;
+    emptyText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -31,22 +31,20 @@ const CURRENCY_MAP = {
   jpy: "JPY",
   "\xA5": "JPY"
 };
+const DEFAULT_CURRENCY_LOCALES = {
+  TRY: "tr-TR",
+  EUR: "de-DE",
+  GBP: "en-GB",
+  JPY: "ja-JP",
+  USD: "en-US"
+};
 export function formatCurrencyPrice(price, rawCurrency, locale) {
   if (price === void 0 || price === null || typeof price !== "number" || !Number.isFinite(price)) {
     return "";
   }
   const cleanCurr = (rawCurrency || "USD").trim();
   const isoCode = CURRENCY_MAP[cleanCurr] || cleanCurr.toUpperCase();
-  let activeLocale = locale;
-  if (!activeLocale) {
-    if (isoCode === "TRY") {
-      activeLocale = "tr-TR";
-    } else if (typeof navigator !== "undefined" && navigator.language) {
-      activeLocale = navigator.language;
-    } else {
-      activeLocale = "en-US";
-    }
-  }
+  const activeLocale = locale || DEFAULT_CURRENCY_LOCALES[isoCode] || "en-US";
   try {
     return new Intl.NumberFormat(activeLocale, {
       style: "currency",

package/dist/runtime/components/KProductListItem/KProductListItem.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 .k-product-list-item
-	.item-image(v-if="item.image")
-		img(:src="item.image" :alt="item.title")
+	.item-image(v-if="item.image && !imageFailed")
+		img(:src="item.image" :alt="item.title" @error="handleImageError")
 	.item-image-placeholder(v-else)
 		KIcon(iconname="tabler:photo" class="placeholder-icon")
 	.item-details
@@ -21,11 +21,16 @@
 </template>
 
 <script setup>
+import { ref } from "vue";
 const props = defineProps({
   item: { type: Object, required: true },
   rowActions: { type: Array, required: false },
   locale: { type: String, required: false }
 });
+const imageFailed = ref(false);
+const handleImageError = () => {
+  imageFailed.value = true;
+};
 import { useKProductListItemLogic } from "./KProductListItem.logic";
 const { hasActions, formattedPrice } = useKProductListItemLogic(props);
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@katlux/block-ecommerce",
-	"version": "0.1.1-alpha.93",
+	"version": "0.1.1-alpha.94",
 	"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": "*",
-		"@katlux/toolkit": "*",
+		"@katlux/providers": "^0.1.1-alpha.100",
+		"@katlux/toolkit": "^0.1.1-alpha.111",
 		"@nuxt/kit": "^3.12.0",
 		"pug": "^3.0.0",
 		"sass": "^1.80.0"