@scayle/storefront-product-listing 0.1.2 → 0.1.4

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

@@ -1,11 +1,13 @@
 import type { ProductSearchQuery } from '@scayle/storefront-nuxt';
+import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
 export interface AppliedFiltersOptions {
     filtersPrefix: string;
 }
 /**
  * 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:
@@ -28,7 +30,7 @@ export interface AppliedFiltersOptions {
  *
  * - `areFiltersApplied` {ComputedRef<boolean>}: A computed property that returns `true` if any filters are currently applied, otherwise `false`.
  */
-export declare function useAppliedFilters({ filtersPrefix }?: AppliedFiltersOptions): {
+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)[]>>;

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);
   });

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

@@ -1,6 +1,6 @@
 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;
@@ -14,8 +14,9 @@ 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".
  *
@@ -28,5 +29,5 @@ 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 declare function useProductListFilter(route: RouteLocationNormalizedLoadedGeneric, currentCategoryId?: MaybeRefOrGetter<number | undefined>, options?: ProductListFilterOptions): UseProductListFilterReturn & Promise<UseProductListFilterReturn>;
 export {};

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,4 +1,5 @@
 import { APISortOption, APISortOrder, type ProductSortConfig } from '@scayle/storefront-nuxt';
+import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
 type SelectedSort = ProductSortConfig & {
     key: string;
     label: string;
@@ -10,7 +11,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,10 +20,11 @@ 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): {
+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;
             };

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) {
@@ -52,6 +50,7 @@ export function useProductListSort({ sortingOptions, defaultSortingKey } = {
     return sortingOptions?.map((option) => ({
       ...option,
       to: {
+        path: route.path,
         query: { ...query, sort: option.key }
       }
     })) || [];

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

@@ -1,6 +1,7 @@
 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 {
@@ -25,5 +26,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): UseProductListingSeoData;
 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,8 +1,8 @@
 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';
+import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
 type UseProductsByCategoryReturn = Pick<Awaited<ReturnType<typeof useProducts>>, 'error' | 'fetching'> & {
     products: ComputedRef<Product[]>;
     pagination: ComputedRef<Pagination | undefined>;
@@ -13,6 +13,7 @@ type UseProductsByCategoryReturn = Pick<Awaited<ReturnType<typeof useProducts>>,
  * 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.
@@ -41,7 +42,6 @@ export interface ProductsByCategoryOptions {
     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 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

@@ -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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-listing",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Collection of essential composables and utilities to work with product listing",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -63,12 +63,12 @@
     "@vueuse/core": "11.2.0",
     "dprint": "0.47.5",
     "eslint": "9.14.0",
-    "happy-dom": "15.11.4",
+    "happy-dom": "15.11.6",
     "eslint-formatter-gitlab": "5.1.0",
     "nuxt": "3.13.2",
     "publint": "0.2.12",
     "typescript": "5.6.3",
-    "vitest": "2.1.4",
+    "vitest": "2.1.5",
     "schema-dts": "1.1.2",
     "vue-router": "4.4.5",
     "fishery": "2.2.2",