@katlux/block-ecommerce 0.1.0-beta.1 → 0.1.0-beta.10

package/dist/module.d.mts

@@ -1,2 +1,6 @@
-export * from "/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-block-ecommerce/src/module";
-export { default } from "/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-block-ecommerce/src/module";
+interface ModuleOptions {
+}
+declare const _default: any;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.0",
+  "version": "0.1.0-beta.10",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,18 +1,23 @@
-import { createJiti } from "file:///home/cagatay/Desktop/projects/KatluxShowcase/node_modules/jiti/lib/jiti.mjs";
+import { defineNuxtModule, createResolver, addComponentsDir } from '@nuxt/kit';
 
-const jiti = createJiti(import.meta.url, {
-  "interopDefault": true,
-  "alias": {
-    "@katlux/block-ecommerce": "/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-block-ecommerce"
-  },
-  "transformOptions": {
-    "babel": {
-      "plugins": []
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@katlux/block-ecommerce",
+    configKey: "katluxEcommerceBlocks",
+    compatibility: {
+      nuxt: "^3.0.0"
     }
+  },
+  defaults: {},
+  async setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      pathPrefix: false,
+      prefix: "",
+      global: true
+    });
   }
-})
-
-/** @type {import("/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-block-ecommerce/src/module")} */
-const _module = await jiti.import("/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-block-ecommerce/src/module.ts");
+});
 
-export default _module?.default ?? _module;
+export { module$1 as default };

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

@@ -0,0 +1,32 @@
+import type { KProductRowAction } from '@katlux/providers';
+import { ADataProvider } from '@katlux/providers';
+type __VLS_Props = {
+    dataProvider: ADataProvider;
+    layout?: 'grid' | 'list';
+    rowActions?: KProductRowAction[];
+    gridColumns?: number | string;
+    gap?: string;
+};
+declare var __VLS_1: {
+    item: import("@katlux/providers").TDataRow;
+    index: number;
+}, __VLS_11: string, __VLS_12: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
+} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    rowActions: KProductRowAction[];
+    layout: "grid" | "list";
+    gridColumns: number | string;
+    gap: string;
+}, {}, {}, {}, 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

@@ -0,0 +1,52 @@
+import type { ADataProvider, KProductRowAction } from '@katlux/providers';
+import { type PropType } from 'vue';
+export interface KProductListProps {
+    dataProvider: ADataProvider;
+    layout?: 'grid' | 'list';
+    rowActions?: KProductRowAction[];
+    gridColumns?: number | string;
+    gap?: string;
+}
+export declare const KProductListDefaultProps: {
+    dataProvider: {
+        type: PropType<ADataProvider>;
+        required: boolean;
+    };
+    layout: {
+        type: PropType<"grid" | "list">;
+        default: string;
+    };
+    rowActions: {
+        type: PropType<KProductRowAction[]>;
+        default: () => never[];
+    };
+    gridColumns: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    gap: {
+        type: StringConstructor;
+        default: string;
+    };
+};
+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;
+    }>;
+};

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

@@ -0,0 +1,48 @@
+import { computed } from "vue";
+export const KProductListDefaultProps = {
+  dataProvider: {
+    type: Object,
+    required: true
+  },
+  layout: {
+    type: String,
+    default: "grid"
+  },
+  rowActions: {
+    type: Array,
+    default: () => []
+  },
+  gridColumns: {
+    type: [Number, String],
+    default: 4
+  },
+  gap: {
+    type: String,
+    default: "1rem"
+  }
+};
+export function useKProductListLogic(props) {
+  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",
+      gap: props.gap
+    };
+  });
+  return {
+    isGrid,
+    gridStyles,
+    listStyles
+  };
+}

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

@@ -0,0 +1,60 @@
+<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 setup>
+import { ADataProvider } from "@katlux/providers";
+import { useKProductListLogic } from "./KProductList.logic";
+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" }
+});
+const { isGrid, gridStyles, listStyles } = useKProductListLogic(props);
+</script>
+
+<style scoped>
+.k-product-list {
+  width: 100%;
+}
+.k-product-list .list-container {
+  width: 100%;
+}
+.k-product-list .footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: var(--gap-lg, 24px);
+}
+.k-product-list .footer .pagination {
+  flex: 1;
+}
+</style>

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

@@ -0,0 +1,32 @@
+import type { KProductRowAction } from '@katlux/providers';
+import { ADataProvider } from '@katlux/providers';
+type __VLS_Props = {
+    dataProvider: ADataProvider;
+    layout?: 'grid' | 'list';
+    rowActions?: KProductRowAction[];
+    gridColumns?: number | string;
+    gap?: string;
+};
+declare var __VLS_1: {
+    item: import("@katlux/providers").TDataRow;
+    index: number;
+}, __VLS_11: string, __VLS_12: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
+} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    rowActions: KProductRowAction[];
+    layout: "grid" | "list";
+    gridColumns: number | string;
+    gap: string;
+}, {}, {}, {}, 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/KProductListItem/KProductListItem.d.vue.ts

@@ -0,0 +1,8 @@
+import type { KProductItemData, KProductRowAction } from '@katlux/providers';
+type __VLS_Props = {
+    item: KProductItemData;
+    rowActions?: KProductRowAction[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,20 @@
+import { type PropType } from 'vue';
+import type { KProductItemData, KProductRowAction } from '@katlux/providers';
+export interface KProductListItemProps {
+    item: KProductItemData;
+    rowActions?: KProductRowAction[];
+}
+export declare const KProductListItemDefaultProps: {
+    item: {
+        type: PropType<KProductItemData>;
+        required: true;
+    };
+    rowActions: {
+        type: PropType<KProductRowAction[]>;
+        default: () => never[];
+    };
+};
+export declare function useKProductListItemLogic(props: KProductListItemProps): {
+    hasActions: import("vue").ComputedRef<boolean | undefined>;
+    formattedPrice: import("vue").ComputedRef<string>;
+};

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

@@ -0,0 +1,25 @@
+import { computed } from "vue";
+export const KProductListItemDefaultProps = {
+  item: {
+    type: Object,
+    required: true
+  },
+  rowActions: {
+    type: Array,
+    default: () => []
+  }
+};
+export function useKProductListItemLogic(props) {
+  const hasActions = computed(() => props.rowActions && props.rowActions.length > 0);
+  const formattedPrice = computed(() => {
+    if (props.item.price === void 0) return "";
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: props.item.currency || "USD"
+    }).format(props.item.price);
+  });
+  return {
+    hasActions,
+    formattedPrice
+  };
+}

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

@@ -0,0 +1,113 @@
+<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 setup>
+const props = defineProps({
+  item: { type: Object, required: true },
+  rowActions: { type: Array, required: false }
+});
+import { useKProductListItemLogic } from "./KProductListItem.logic";
+const { hasActions, formattedPrice } = useKProductListItemLogic(props);
+</script>
+
+<style 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%;
+}
+.k-product-list-item:hover {
+  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
+  transform: translateY(-2px);
+}
+.k-product-list-item .item-image, .k-product-list-item .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);
+}
+.k-product-list-item .item-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+.k-product-list-item:hover .item-image img {
+  transform: scale(1.05);
+}
+.k-product-list-item .item-image-placeholder .placeholder-icon {
+  font-size: 3rem;
+  color: var(--text-color-muted, #adb5bd);
+  opacity: 0.5;
+}
+.k-product-list-item .item-details {
+  padding: var(--gap-md, 16px);
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.k-product-list-item .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;
+}
+.k-product-list-item .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;
+}
+.k-product-list-item .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);
+}
+.k-product-list-item .item-actions {
+  padding: var(--gap-md, 16px);
+  padding-top: 0;
+  display: flex;
+  gap: var(--gap-sm, 8px);
+  flex-wrap: wrap;
+}
+.k-product-list-item .item-actions :deep(.KButton) {
+  flex: 1;
+  min-width: 100px;
+}
+</style>

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

@@ -0,0 +1,8 @@
+import type { KProductItemData, KProductRowAction } from '@katlux/providers';
+type __VLS_Props = {
+    item: KProductItemData;
+    rowActions?: KProductRowAction[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types.d.mts

@@ -1,13 +1,3 @@
-import type { ModuleHooks, ModuleRuntimeHooks, ModuleRuntimeConfig, ModulePublicRuntimeConfig } from './module.mjs'
+export { default } from './module.mjs'
 
-declare module '#app' {
-  interface RuntimeNuxtHooks extends ModuleRuntimeHooks {}
-}
-
-declare module '@nuxt/schema' {
-  interface NuxtHooks extends ModuleHooks {}
-  interface RuntimeConfig extends ModuleRuntimeConfig {}
-  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
-}
-
-export * from "./module.mjs"
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@katlux/block-ecommerce",
-	"version": "0.1.0-beta.1",
+	"version": "0.1.0-beta.10",
 	"description": "Pre-built eCommerce block components for Katlux toolkit",
 	"author": "Katlux",
 	"license": "MIT",
@@ -10,7 +10,8 @@
 	"main": "./dist/module.mjs",
 	"scripts": {
 		"build": "nuxt-module-build build",
-		"dev": "nuxt-module-build build --stub"
+		"dev": "nuxt-module-build build --stub",
+		"prepublishOnly": "npm run build"
 	},
 	"exports": {
 		".": {

package/dist/module.d.cts

@@ -1,2 +0,0 @@
-export * from "/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-block-ecommerce/src/module";
-export { default } from "/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-block-ecommerce/src/module";