@scayle/storefront-product-listing 0.1.3 → 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,14 +1,26 @@
+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.
  *
- * @param {object} options - Configuration options for applied filters.
+ * @param {RouteLocationNormalizedLoadedGeneric} [route] - Route object to handle the queries.
+ * @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:
@@ -21,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({ 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

@@ -1,8 +1,6 @@
 import { computed } from "vue";
-import { useRoute } from "#app/composables/router";
 import { parseFilterDataFromRoute } from "../utils/filters.js";
-export function useAppliedFilters({ filtersPrefix } = { filtersPrefix: "filters" }) {
-  const route = useRoute();
+export function useAppliedFilters(route, { filtersPrefix } = { filtersPrefix: "filters" }) {
   const appliedFilter = computed(() => {
     return parseFilterDataFromRoute(route, filtersPrefix);
   });
@@ -14,24 +12,25 @@ export function useAppliedFilters({ filtersPrefix } = { filtersPrefix: "filters"
     }
     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

@@ -1,12 +1,12 @@
 import { useFilters } from '@scayle/storefront-nuxt/composables';
 import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
-import type { LocationQuery } from 'vue-router';
+import type { LocationQuery, RouteLocationNormalizedLoadedGeneric } from 'vue-router';
 import type { FilterItemWithValues } from '../../types/filter.js';
 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>;
@@ -14,12 +14,13 @@ type UseProductListFilterReturn = Pick<Awaited<ReturnType<typeof useFilters>>, '
 /**
  * Composable to manage filters based on current category ID and route query parameters.
  *
+ * @param {RouteLocationNormalizedLoadedGeneric} [route] - Route object to handle the queries.
  * @param {number} [currentCategoryId] - current/active category ID
- * @param {ProductListingFilterOptions} options - Configuration options for filters.
+ * @param {ProductListFilterOptions} options - Configuration options for filters.
  * @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.
@@ -28,5 +29,4 @@ type UseProductListFilterReturn = Pick<Awaited<ReturnType<typeof useFilters>>, '
  *   - `unfilteredCount` {ComputedRef<number>}: returns unfiltered filters count.
  *   - `clearedPriceQuery` {ComputedRef<LocationQuery | undefined>}: constructs an empty query object.
  */
-export declare function useProductListFilter(currentCategoryId?: MaybeRefOrGetter<number | undefined>, options?: ProductListFilterOptions): UseProductListFilterReturn & Promise<UseProductListFilterReturn>;
-export {};
+export declare function useProductListFilter(route: RouteLocationNormalizedLoadedGeneric, currentCategoryId?: MaybeRefOrGetter<number | undefined>, options?: ProductListFilterOptions): UseProductListFilterReturn & Promise<UseProductListFilterReturn>;

package/dist/runtime/composables/useProductListFilter.js

@@ -2,12 +2,10 @@ import { extendPromise } from "@scayle/storefront-nuxt";
 import { useFilters } from "@scayle/storefront-nuxt/composables";
 import { computed, toValue } from "vue";
 import { getClearedPriceQuery } from "../utils/filters.js";
-import { useRoute } from "#app/composables/router";
 import { useAppliedFilters } from "./useAppliedFilters.js";
-export function useProductListFilter(currentCategoryId, options = {}) {
-  const route = useRoute();
+export function useProductListFilter(route, currentCategoryId, options = {}) {
   const { immediate = true, keyPrefix = "base" } = options;
-  const { appliedFilter } = useAppliedFilters();
+  const { appliedFilter } = useAppliedFilters(route);
   const filterData = useFilters({
     params: computed(() => ({
       categoryId: toValue(currentCategoryId),

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

@@ -1,8 +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;
@@ -10,7 +17,8 @@ export interface ProductListSortOptions {
 /**
  * Custom composable to handle product list sorting.
  *
- * @param {ProductListOptions} [options] - Options for configuring the sorting behavior.
+ * @param {RouteLocationNormalizedLoadedGeneric} [route] - Route object to handle the queries and path.
+ * @param {ProductListSortOptions} [options] - Options for configuring the sorting behavior.
  * @param {SelectedSort[]} [options.sortingOptions] - Array of available sorting options.
  * @param {string} [options.defaultSortingKey] - Default sorting key to be applied if no specific sort is selected.
  * @returns - computed properties and methods related to sorting:
@@ -18,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({ 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/useProductListSort.js

@@ -3,8 +3,7 @@ import {
   APISortOrder
 } from "@scayle/storefront-nuxt";
 import { computed } from "vue";
-import { useRoute } from "#app/composables/router";
-export function useProductListSort({ sortingOptions, defaultSortingKey } = {
+export function useProductListSort(route, { sortingOptions, defaultSortingKey } = {
   sortingOptions: [
     {
       key: "top_seller",
@@ -39,7 +38,6 @@ export function useProductListSort({ sortingOptions, defaultSortingKey } = {
   ],
   defaultSortingKey: "top_seller"
 }) {
-  const route = useRoute();
   const selectedSort = computed(() => {
     const sort = route.query.sort && sortingOptions?.find((option) => option.key === route.query.sort);
     if (!sort) {

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

@@ -1,9 +1,10 @@
 import { type ComputedRef, type Ref } from 'vue';
 import type { BreadcrumbItem, Category } from '@scayle/storefront-nuxt';
 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>;
@@ -15,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.
@@ -25,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[], { 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/useProductListingSeoData.js

@@ -5,9 +5,9 @@ import {
 } from "@scayle/storefront-nuxt";
 import { useAppliedFilters } from "./useAppliedFilters.js";
 import { useProductListSort } from "./useProductListSort.js";
-export function useProductListingSeoData(category, breadcrumbs, { baseUrl, fullPath }) {
-  const { areFiltersApplied } = useAppliedFilters();
-  const { isDefaultSortSelected } = useProductListSort();
+export function useProductListingSeoData(category, breadcrumbs, route, { baseUrl, fullPath }) {
+  const { areFiltersApplied } = useAppliedFilters(route);
+  const { isDefaultSortSelected } = useProductListSort(route);
   const robots = computed(() => {
     return !areFiltersApplied.value && isDefaultSortSelected.value ? "index,follow" : "noindex,follow";
   });

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

@@ -1,18 +1,31 @@
 import { type FetchProductsByCategoryParams, type Product, type ProductWith } from '@scayle/storefront-nuxt';
-import type { LocationQuery } from 'vue-router';
 import { type MaybeRefOrGetter, type ComputedRef } from 'vue';
 import { useProducts } from '@scayle/storefront-nuxt/composables';
 import type { Pagination } from '@scayle/storefront-api';
-type UseProductsByCategoryReturn = Pick<Awaited<ReturnType<typeof useProducts>>, 'error' | 'fetching'> & {
+import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
+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.
  *
  * @param {MaybeRefOrGetter<number>} categoryId - The ID of the category to fetch products for. Accepts a ref, computed, or static number.
+ * @param {RouteLocationNormalizedLoadedGeneric} [route] - Route object to handle the queries.
  * @param {ProductsByCategoryOptions} options - Configuration options for fetching products.
  * @param {Partial<FetchProductsByCategoryParams>} options.params - Parameters to control product fetch behavior, excluding `category` and `categoryId`.
  * @param {Partial<{ lazy: boolean; immediate: boolean }>} options.fetchingOptions - Options for fetch timing, such as lazy loading or immediate fetching.
@@ -30,18 +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;
-    query: LocationQuery;
-}
-export declare function useProductsByCategory(categoryId: MaybeRefOrGetter<number>, { params, withParams, cacheKeyPrefix, fetchingKey, fetchingOptions, fetchProductsCacheTtl, productsPerPage, query, }?: Partial<ProductsByCategoryOptions>): UseProductsByCategoryReturn & Promise<UseProductsByCategoryReturn>;
-export {};
+export declare function useProductsByCategory(categoryId: MaybeRefOrGetter<number>, route: RouteLocationNormalizedLoadedGeneric, { params, withParams, cacheKeyPrefix, fetchingKey, fetchingOptions, fetchProductsCacheTtl, productsPerPage, }?: Partial<ProductsByCategoryOptions>): UseProductsByCategoryReturn & Promise<UseProductsByCategoryReturn>;

package/dist/runtime/composables/useProductsByCategory.js

@@ -8,15 +8,14 @@ import { useAppliedFilters } from "./useAppliedFilters.js";
 const PRODUCTS_PER_PAGE = 24;
 const DEFAULT_CACHE_TTL = 1e3;
 const DEFAULT_CACHE_KEY_PREFIX = "PLP";
-export function useProductsByCategory(categoryId, {
+export function useProductsByCategory(categoryId, route, {
   params,
   withParams,
   cacheKeyPrefix,
   fetchingKey,
   fetchingOptions,
   fetchProductsCacheTtl,
-  productsPerPage,
-  query
+  productsPerPage
 } = {
   params: {
     includeSoldOut: false,
@@ -28,13 +27,13 @@ export function useProductsByCategory(categoryId, {
   fetchProductsCacheTtl: DEFAULT_CACHE_TTL,
   cacheKeyPrefix: DEFAULT_CACHE_KEY_PREFIX
 }) {
-  const { selectedSort } = useProductListSort();
-  const { appliedFilter } = useAppliedFilters();
+  const { selectedSort } = useProductListSort(route);
+  const { appliedFilter } = useAppliedFilters(route);
   const productsData = useProducts({
     params: () => ({
-      ...query?.page && { page: +query.page },
+      ...route?.query.page && { page: +route?.query.page },
       sort: selectedSort.value,
-      perPage: query?.products_per_page ? parseInt(query.products_per_page, 10) : productsPerPage,
+      perPage: route?.query.products_per_page ? parseInt(route?.query.products_per_page, 10) : productsPerPage,
       with: withParams,
       categoryId: toValue(categoryId),
       includeSoldOut: params?.includeSoldOut,
@@ -51,11 +50,15 @@ export function useProductsByCategory(categoryId, {
     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.3",
+  "version": "0.2.0",
   "description": "Collection of essential composables and utilities to work with product listing",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",