@scayle/storefront-product-listing 0.1.4 → 0.2.0

package/README.md

@@ -70,9 +70,3 @@ Learn more about [SCAYLE’s architecture](https://scayle.dev/en/getting-started
 [npm-downloads-href]: https://npmjs.com/package/@scayle/storefront-product-listing
 [license-src]: https://img.shields.io/npm/l/@scayle/storefront-product-listing.svg?style=flat&colorA=18181B&colorB=28CF8D
 [license-href]: https://npmjs.com/package/@scayle/storefront-product-listing
-
-## License
-
-Licensed under the [MIT License](https://opensource.org/license/mit/)
-
----

package/dist/runtime/composables/useAppliedFilters.d.ts

@@ -1,8 +1,18 @@
+import { type ComputedRef } from 'vue';
 import type { ProductSearchQuery } from '@scayle/storefront-nuxt';
 import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
+export type AppliedAttributeValues = Record<string, (string | number)[]>;
+export type AppliedBooleanValues = Record<string, boolean>;
 export interface AppliedFiltersOptions {
     filtersPrefix: string;
 }
+export interface UseAppliedFiltersReturn {
+    appliedFilter: ComputedRef<ProductSearchQuery>;
+    appliedFiltersCount: ComputedRef<number>;
+    appliedBooleanValues: ComputedRef<AppliedBooleanValues>;
+    appliedAttributeValues: ComputedRef<AppliedAttributeValues>;
+    areFiltersApplied: ComputedRef<boolean>;
+}
 /**
  * Composable to manage applied filters based on route query parameters.
  *
@@ -10,7 +20,7 @@ export interface AppliedFiltersOptions {
  * @param {AppliedFiltersOptions} options - Configuration options for applied filters.
  * @param {string} options.filtersPrefix - The prefix used to identify filter-related query parameters.
  *
- * @returns {object} - An object containing the following properties:
+ * @returns {UseAppliedFiltersReturn} - An object containing reactive data and computed properties for managing applied filters:
  *
  * - `appliedFilter` {ComputedRef<ProductSearchQuery>}: A computed property returning a `ProductSearchQuery` object based on the route's query parameters.
  *   - `attributes`: An array of attribute filters, where each filter has:
@@ -23,17 +33,8 @@ export interface AppliedFiltersOptions {
  *   - `term`: (Optional) A search term filter as a string.
  *
  * - `appliedFiltersCount` {ComputedRef<number>}: A computed property that returns the total count of applied filters. Counts minPrice/maxPrice as one and counts each attribute filter separately.
- *
- * - `appliedAttributeValues` {ComputedRef<Record<string, Array<number>>>}: A computed property that returns a record mapping attribute keys to arrays of numbers representing selected values for each attribute.
- *
- * - `appliedBooleanValues` {ComputedRef<Record<string, boolean>>}: A computed property that returns a record mapping attribute keys to their boolean values for boolean filters.
- *
+ * - `appliedAttributeValues` {ComputedRef<AppliedAttributeValues>}: A computed property that returns a record mapping attribute keys to arrays of numbers representing selected values for each attribute.
+ * - `appliedBooleanValues` {ComputedRef<appliedBooleanValues>}: A computed property that returns a record mapping attribute keys to their boolean values for boolean filters.
  * - `areFiltersApplied` {ComputedRef<boolean>}: A computed property that returns `true` if any filters are currently applied, otherwise `false`.
  */
-export declare function useAppliedFilters(route: RouteLocationNormalizedLoadedGeneric, { filtersPrefix }?: AppliedFiltersOptions): {
-    appliedFilter: import("vue").ComputedRef<ProductSearchQuery>;
-    appliedFiltersCount: import("vue").ComputedRef<number>;
-    appliedAttributeValues: import("vue").ComputedRef<Record<string, (string | number)[]>>;
-    appliedBooleanValues: import("vue").ComputedRef<Record<string, boolean>>;
-    areFiltersApplied: import("vue").ComputedRef<boolean>;
-};
+export declare function useAppliedFilters(route: RouteLocationNormalizedLoadedGeneric, { filtersPrefix }?: AppliedFiltersOptions): UseAppliedFiltersReturn;

package/dist/runtime/composables/useAppliedFilters.js

@@ -12,24 +12,25 @@ export function useAppliedFilters(route, { filtersPrefix } = { filtersPrefix: "f
     }
     return count;
   });
-  const appliedAttributeValues = computed(() => {
-    const values = {};
-    appliedFilter.value?.attributes?.forEach((attribute) => {
-      if (attribute.type !== "attributes" || !attribute.key) {
-        return;
-      }
-      values[attribute.key] = attribute.values;
-    });
-    return values;
-  });
+  const appliedAttributeValues = computed(
+    () => {
+      const attributes = appliedFilter.value?.attributes ?? [];
+      return attributes.reduce((values, attribute) => {
+        if (attribute.type === "attributes" && attribute.key) {
+          values[attribute.key] = attribute.values;
+        }
+        return values;
+      }, {});
+    }
+  );
   const appliedBooleanValues = computed(() => {
-    const values = {};
-    appliedFilter.value?.attributes?.forEach((attribute) => {
+    const attributes = appliedFilter.value?.attributes ?? [];
+    return attributes.reduce((values, attribute) => {
       if (attribute.type === "boolean") {
         values[attribute.key] = attribute.value;
       }
-    });
-    return values;
+      return values;
+    }, {});
   });
   const areFiltersApplied = computed(() => {
     return appliedFiltersCount.value > 0;

package/dist/runtime/composables/useProductListFilter.d.ts

@@ -6,7 +6,7 @@ export type ProductListFilterOptions = Partial<{
     immediate: boolean;
     keyPrefix: string;
 }>;
-type UseProductListFilterReturn = Pick<Awaited<ReturnType<typeof useFilters>>, 'error' | 'status' | 'fetch' | 'fetching'> & {
+export type UseProductListFilterReturn = Pick<Awaited<ReturnType<typeof useFilters>>, 'error' | 'status' | 'fetch' | 'fetching'> & {
     availableFilters: ComputedRef<FilterItemWithValues[]>;
     clearedPriceQuery: ComputedRef<LocationQuery | undefined>;
     unfilteredCount: ComputedRef<number>;
@@ -20,7 +20,7 @@ type UseProductListFilterReturn = Pick<Awaited<ReturnType<typeof useFilters>>, '
  * @param {string} options.immediate - Will enable "immediate" flag via "useFilters" composable in it.
  * @param {string} options.keyPrefix - The prefix used to construct "key" via "useFilters" payload. Default is "base".
  *
- * @returns {UseProductListFilterReturn} - An object containing the following properties:
+ * @returns {UseProductListFilterReturn} - An object containing reactive data, computed properties and async RPC call for managing filters:
  *   - `fetch`: call for fetching the filters.
  *   - `error`: returns "useFilters" error.
  *   - `status`: returns "useFilters" status.
@@ -30,4 +30,3 @@ type UseProductListFilterReturn = Pick<Awaited<ReturnType<typeof useFilters>>, '
  *   - `clearedPriceQuery` {ComputedRef<LocationQuery | undefined>}: constructs an empty query object.
  */
 export declare function useProductListFilter(route: RouteLocationNormalizedLoadedGeneric, currentCategoryId?: MaybeRefOrGetter<number | undefined>, options?: ProductListFilterOptions): UseProductListFilterReturn & Promise<UseProductListFilterReturn>;
-export {};

package/dist/runtime/composables/useProductListSort.d.ts

@@ -1,9 +1,15 @@
-import { APISortOption, APISortOrder, type ProductSortConfig } from '@scayle/storefront-nuxt';
+import { type ProductSortConfig } from '@scayle/storefront-nuxt';
+import { type ComputedRef } from 'vue';
 import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
 type SelectedSort = ProductSortConfig & {
     key: string;
     label: string;
 };
+export interface UseProductListSortReturn {
+    selectedSort: ComputedRef<SelectedSort | undefined>;
+    sortLinks: ComputedRef<SelectedSort[]>;
+    isDefaultSortSelected: ComputedRef<boolean>;
+}
 export interface ProductListSortOptions {
     sortingOptions?: SelectedSort[];
     defaultSortingKey?: string;
@@ -20,23 +26,5 @@ export interface ProductListSortOptions {
  * - {ComputedRef<SelectedSort[]>} sortLinks - Links with updated query parameters for each sorting option.
  * - {ComputedRef<boolean>} isDefaultSortSelected - Boolean indicating if the default sort is selected.
  */
-export declare function useProductListSort(route: RouteLocationNormalizedLoadedGeneric, { sortingOptions, defaultSortingKey }?: ProductListSortOptions): {
-    selectedSort: import("vue").ComputedRef<SelectedSort | undefined>;
-    sortLinks: import("vue").ComputedRef<{
-        to: {
-            path: string;
-            query: {
-                sort: string;
-            };
-        };
-        by?: APISortOption;
-        direction?: APISortOrder;
-        score?: "category_scores" | "brand_scores";
-        channel?: string;
-        sortingKey?: string | string[];
-        key: string;
-        label: string;
-    }[]>;
-    isDefaultSortSelected: import("vue").ComputedRef<boolean>;
-};
+export declare function useProductListSort(route: RouteLocationNormalizedLoadedGeneric, { sortingOptions, defaultSortingKey }?: ProductListSortOptions): UseProductListSortReturn;
 export {};

package/dist/runtime/composables/useProductListingSeoData.d.ts

@@ -4,7 +4,7 @@ import type { BreadcrumbList, WithContext } from 'schema-dts';
 import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
 type CanonicalLink = Record<'rel' | 'key' | 'href', string>;
 type UrlParams = Record<'baseUrl' | 'fullPath', string>;
-interface UseProductListingSeoData {
+export interface UseProductListingSeoDataReturn {
     title: ComputedRef<string>;
     activeCategoryName: ComputedRef<string | undefined>;
     robots: ComputedRef<string>;
@@ -16,6 +16,7 @@ interface UseProductListingSeoData {
  *
  * @param {Ref<Category>} category - Reactive category
  * @param {BreadcrumbItem[]} breadcrumbs - Breadcrumb items.
+ * @param {RouteLocationNormalizedLoadedGeneric} [route] - route object to handle queries.
  * @param {UrlParams} URL params - URL data for constructing the canonical link.
  *
  * @returns {UseProductListingSeoData} An object containing reactive data and computed properties for managing SEO data.
@@ -26,5 +27,5 @@ interface UseProductListingSeoData {
  * @property {ComputedRef<CanonicalLink[]>} canonicalLink - A computed canonical link.
  * @property {ComputedRef<WithContext<BreadcrumbList> | []>} categoryBreadcrumbSchema - A computed breadcrumb schema.
  */
-export declare function useProductListingSeoData(category: Ref<Category | undefined | null>, breadcrumbs: BreadcrumbItem[], route: RouteLocationNormalizedLoadedGeneric, { baseUrl, fullPath }: UrlParams): UseProductListingSeoData;
+export declare function useProductListingSeoData(category: Ref<Category | undefined | null>, breadcrumbs: BreadcrumbItem[], route: RouteLocationNormalizedLoadedGeneric, { baseUrl, fullPath }: UrlParams): UseProductListingSeoDataReturn;
 export {};

package/dist/runtime/composables/useProductsByCategory.d.ts

@@ -3,12 +3,24 @@ import { type MaybeRefOrGetter, type ComputedRef } from 'vue';
 import { useProducts } from '@scayle/storefront-nuxt/composables';
 import type { Pagination } from '@scayle/storefront-api';
 import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
-type UseProductsByCategoryReturn = Pick<Awaited<ReturnType<typeof useProducts>>, 'error' | 'fetching'> & {
+export type UseProductsByCategoryReturn = Pick<Awaited<ReturnType<typeof useProducts>>, 'error' | 'fetching'> & {
     products: ComputedRef<Product[]>;
     pagination: ComputedRef<Pagination | undefined>;
     totalProductsCount: ComputedRef<number>;
     paginationOffset: ComputedRef<number>;
 };
+export interface ProductsByCategoryOptions {
+    params: Omit<Partial<FetchProductsByCategoryParams>, 'category' | 'categoryId'>;
+    fetchingOptions: Partial<{
+        lazy: boolean;
+        immediate: boolean;
+    }>;
+    productsPerPage: number;
+    fetchProductsCacheTtl: number;
+    cacheKeyPrefix: string;
+    fetchingKey?: string;
+    withParams?: ProductWith;
+}
 /**
  * Composable to fetch and manage products by category with configurable options.
  *
@@ -31,17 +43,4 @@ type UseProductsByCategoryReturn = Pick<Awaited<ReturnType<typeof useProducts>>,
  * @property {Ref<boolean>} fetching - A reactive boolean indicating if products are currently being fetched.
  * @property {Ref<Error | null>} error - A reactive error object, null if no error occurred.
  */
-export interface ProductsByCategoryOptions {
-    params: Omit<Partial<FetchProductsByCategoryParams>, 'category' | 'categoryId'>;
-    fetchingOptions: Partial<{
-        lazy: boolean;
-        immediate: boolean;
-    }>;
-    productsPerPage: number;
-    fetchProductsCacheTtl: number;
-    cacheKeyPrefix: string;
-    fetchingKey?: string;
-    withParams?: ProductWith;
-}
 export declare function useProductsByCategory(categoryId: MaybeRefOrGetter<number>, route: RouteLocationNormalizedLoadedGeneric, { params, withParams, cacheKeyPrefix, fetchingKey, fetchingOptions, fetchProductsCacheTtl, productsPerPage, }?: Partial<ProductsByCategoryOptions>): UseProductsByCategoryReturn & Promise<UseProductsByCategoryReturn>;
-export {};

package/dist/runtime/composables/useProductsByCategory.js

@@ -50,11 +50,15 @@ export function useProductsByCategory(categoryId, route, {
     key: fetchingKey || `${toValue(categoryId)}-products`,
     options: fetchingOptions
   });
-  const products = computed(() => productsData.data.value?.products ?? []);
-  const pagination = computed(() => productsData.data.value?.pagination);
-  const totalProductsCount = computed(
-    () => productsData.data.value?.pagination.total ?? 0
-  );
+  const products = computed(() => {
+    return productsData.data.value?.products ?? [];
+  });
+  const pagination = computed(() => {
+    return productsData.data.value?.pagination;
+  });
+  const totalProductsCount = computed(() => {
+    return productsData.data.value?.pagination.total ?? 0;
+  });
   const paginationOffset = computed(() => {
     const page = pagination.value?.page ?? 1;
     const perPage = pagination.value?.perPage ?? productsPerPage ?? PRODUCTS_PER_PAGE;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-listing",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Collection of essential composables and utilities to work with product listing",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",