@propeller-commerce/propeller-v2-vue-ui 0.3.14

package/dist/components/ProductGrid.vue.d.ts

@@ -0,0 +1,290 @@
+import { Component } from 'vue';
+import { GraphQLClient, Product, Cluster, Cart, CartMainItem, AttributeFilter, ProductTextFilterInput, ProductsResponse, Category, Contact, Customer } from '@propeller-commerce/propeller-sdk-v2';
+export interface ProductGridProps {
+    /**
+     * Initialised Propeller SDK GraphQL client.
+     * Required when `products` is not provided — used for internal data fetching.
+     */
+    graphqlClient?: GraphQLClient;
+    /**
+     * Pre-fetched products/clusters to display.
+     * When provided the component skips internal API calls entirely.
+     * Pass an empty array (not undefined) to show the empty state while the
+     * parent controls loading.
+     */
+    products?: (Product | Cluster)[];
+    /** Language code for product data. Defaults to 'NL'. */
+    language?: string;
+    /** Tax zone used for price calculation. Defaults to 'NL'. */
+    taxZone?: string;
+    /**
+     * Category ID to list products for (category-page mode).
+     * When omitted alongside `term` and `brand`, `config.baseCategoryId` is used.
+     */
+    categoryId?: number;
+    /**
+     * Search term — passes `term` into categoryProductSearchInput and uses
+     * `config.baseCategoryId` so the whole catalog is searched.
+     */
+    term?: string;
+    /**
+     * Manufacturer/brand name — passes `manufacturers: [brand]` into
+     * categoryProductSearchInput and uses `config.baseCategoryId`.
+     */
+    brand?: string;
+    /** Number of columns in the grid. Accepts 2, 3, 4, 5, or 6. Defaults to 3. */
+    columns?: number;
+    /**
+     * Show a skeleton loader.
+     * Useful when the parent controls loading state and passes `products` down.
+     * The grid automatically shows a skeleton during internal fetches regardless
+     * of this prop. Defaults to false.
+     */
+    isLoading?: boolean;
+    /**
+     * Controls portal visibility mode.
+     * 'open'        — full e-commerce; AddToCart is visible in product cards.
+     * 'semi-closed' — catalog-only; AddToCart is hidden.
+     * Defaults to 'open'.
+     */
+    portalMode?: string;
+    /** Authenticated user passed through to ProductCard / AddToCart. */
+    user?: Contact | Customer | null;
+    /** Active company ID from the company switcher. Overrides user's default company for price calculation. Triggers a re-fetch when changed. */
+    companyId?: number;
+    /**
+     * When true, tax-inclusive (gross) price is the leading price.
+     * Defaults to false.
+     */
+    includeTax?: boolean;
+    /**
+     * Enables stock validation inside AddToCart.
+     * Blocks add when requested quantity exceeds available stock.
+     * Defaults to false.
+     */
+    stockValidation?: boolean;
+    /**
+     * When false, hides the AddToCart control in product cards.
+     * ClusterCards always show their "View cluster" navigation button.
+     * Defaults to true.
+     */
+    allowAddToCart?: boolean;
+    /**
+     * Called after each internal data fetch with the filterable attributes
+     * returned by the API (for driving a sibling FiltersSidebar).
+     */
+    onFiltersChange?: (filters: AttributeFilter[]) => void;
+    /**
+     * Active text filters to apply — built by the parent from FiltersSidebar
+     * `onFilterChange` callbacks.  Each entry maps to a `textFilters` input
+     * row in the CategoryService query.
+     * When this prop changes the grid automatically re-fetches (page resets to 1).
+     */
+    textFilters?: ProductTextFilterInput[];
+    /**
+     * Active price range lower bound from the FiltersSidebar `onPriceChange`.
+     * Triggers a re-fetch when changed.
+     */
+    priceFilterMin?: number;
+    /**
+     * Active price range upper bound from the FiltersSidebar `onPriceChange`.
+     * Triggers a re-fetch when changed.
+     */
+    priceFilterMax?: number;
+    /**
+     * Called when sort state changes internally (for syncing a sibling toolbar).
+     */
+    onSortChange?: (sort: any) => void;
+    /**
+     * Called after each internal data fetch with the min/max price of the
+     * current product set — use to populate a price range slider in the parent.
+     */
+    onPriceBoundsChange?: (min: number, max: number) => void;
+    /**
+     * Called after each fetch with the total number of products found —
+     * use to display a result count in the parent toolbar.
+     */
+    onItemsFoundChange?: (count: number) => void;
+    /**
+     * Called after each fetch with the number of items visible on the current page
+     * (after client-side language filtering).
+     */
+    onPageItemCountChange?: (count: number) => void;
+    /**
+     * Called when the user clicks Previous / Next in the built-in pagination —
+     * use to keep the parent URL / page state in sync.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Called after each successful internal data fetch with the full
+     * ProductsResponse object — use to drive an external GridPagination
+     * component by passing the result as its `products` prop.
+     */
+    onProductsResponse?: (products: ProductsResponse) => void;
+    /**
+     * Called after each successful internal data fetch with the full
+     * Category object — use to populate sibling components like GridTitle,
+     * CategoryDescription, and CategoryShortDescription.
+     */
+    onCategoryChange?: (category: Category) => void;
+    /**
+     * Called whenever the internal loading state changes.
+     * Use to disable sibling components (e.g. GridFilters) while a fetch is in flight.
+     */
+    onLoadingChange?: (isLoading: boolean) => void;
+    /**
+     * Externally controlled current page.
+     * When provided, the grid uses this value instead of its internal page
+     * counter. Wire this to the `onPageChange` callback from a sibling
+     * GridPagination so the two components stay in sync.
+     * When changed the grid automatically re-fetches.
+     */
+    page?: number;
+    /**
+     * Number of products per page. Defaults to 12.
+     * When changed the grid automatically re-fetches (page resets to 1).
+     */
+    pageSize?: number;
+    /**
+     * Sort field to use (e.g. 'NAME', 'PRICE').
+     * When provided overrides internal sort state.
+     * When changed the grid automatically re-fetches (page resets to 1).
+     */
+    sortField?: string;
+    /**
+     * Sort direction: 'ASC' or 'DESC'.
+     * Only used when sortField is also provided.
+     * When changed the grid automatically re-fetches (page resets to 1).
+     */
+    sortOrder?: string;
+    /**
+     * Configuration object providing:
+     *   imageSearchFiltersGrid, imageVariantFiltersMedium — passed to CategoryService
+     *   baseCategoryId — used when querying by term or brand
+     *   urls.getProductUrl / urls.getClusterUrl — for card URL generation
+     */
+    configuration?: any;
+    /** ID of an existing cart to add items into. */
+    cartId?: string;
+    /**
+     * Auto-create a cart when none is available.
+     * Always pair with `onCartCreated` to persist the new cart ID.
+     */
+    createCart?: boolean;
+    /** Called after AddToCart creates a new cart internally. */
+    onCartCreated?: (cart: Cart) => void;
+    /** Called after every successful add-to-cart operation. */
+    afterAddToCart?: (cart: Cart, item?: CartMainItem) => void;
+    /**
+     * When true, AddToCart shows a success modal instead of a toast.
+     * Defaults to false.
+     */
+    showModal?: boolean;
+    /**
+     * Render − / + stepper buttons in AddToCart.
+     * Defaults to true.
+     */
+    allowIncrDecr?: boolean;
+    /** Called when "Proceed to checkout" is clicked in the AddToCart modal. */
+    onProceedToCheckout?: () => void;
+    /** Called when "Request a Quote" is clicked in the AddToCart modal. */
+    onRequestQuoteClick?: (cart: Cart) => void;
+    /**
+     * Label overrides forwarded directly to the embedded AddToCart component.
+     * Keys: add, adding, addedToCart, outOfStock, noCartId, errorAdding,
+     *       modalTitle, quantity, continueShopping, proceedToCheckout
+     */
+    addToCartLabels?: Record<string, string>;
+    /** Translated labels forwarded to embedded `<ProductCard>` instances.
+     * See `ProductCardProps.labels` for slugs. */
+    productCardLabels?: Record<string, string>;
+    /** Translated labels forwarded to embedded `<ClusterCard>` instances.
+     * See `ClusterCardProps.labels` for slugs. */
+    clusterCardLabels?: Record<string, string>;
+    /**
+     * Show the stock / availability widget on each product card.
+     * Forwarded directly to `ProductCard.showStock`.
+     * Defaults to false.
+     */
+    showStock?: boolean;
+    /**
+     * Show only the availability indicator inside the stock widget.
+     * Forwarded to `ProductCard.showAvailability`.
+     * Defaults to true.
+     */
+    showAvailability?: boolean;
+    /**
+     * Show the price below the product name.
+     * Defaults to true.
+     */
+    showPrice?: boolean;
+    /**
+     * Label overrides forwarded to the embedded ItemStock component inside each card.
+     * Keys: inStock, outOfStock, lowStock, available, notAvailable, pieces
+     */
+    stockLabels?: Record<string, string>;
+    /** Translated labels forwarded to the embedded `<ProductPrice>` display
+     * inside each `<ProductCard>`. See `ProductPriceProps.labels` for slugs. */
+    priceLabels?: Record<string, string>;
+    /** Show a heart-icon favourite toggle on each card. */
+    enableAddFavorite?: boolean;
+    /**
+     * Called when a favourite is toggled on any card.
+     * Receives the full Product or Cluster object and the new favourite state.
+     */
+    onToggleFavorite?: (item: Product | Cluster, isFavorite: boolean) => void;
+    /**
+     * Called when a cluster card name, image, or "View cluster" button is
+     * clicked — use for SPA-style routing instead of full-page navigation.
+     */
+    onClusterClick?: (cluster: Cluster) => void;
+    /**
+     * Called when a product card name or image is clicked — use for SPA
+     * routing instead of full-page navigation.
+     */
+    onProductClick?: (product: Product) => void;
+    /** Extra CSS class applied to the root element. */
+    className?: string;
+    /** Translated labels keyed by the slugs used inside the component (see
+     * `getLabel` calls). Missing keys fall back to the English defaults. */
+    labels?: Record<string, string>;
+    priceComponent?: Component;
+    stockComponent?: Component;
+    addToCartComponent?: Component;
+    imageComponent?: Component;
+    badgesComponent?: Component;
+    favoriteComponent?: Component;
+    productCardComponent?: Component;
+    clusterCardComponent?: Component;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        beforeItem?(_: {
+            item: Product | Cluster;
+            index: number;
+        }): any;
+        afterItem?(_: {
+            item: Product | Cluster;
+            index: number;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ProductGridProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ProductGridProps> & Readonly<{}>, {
+    showPrice: boolean;
+    showStock: boolean;
+    showAvailability: boolean;
+    allowAddToCart: boolean;
+    allowIncrDecr: boolean;
+    isLoading: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ProductInfo.vue.d.ts

@@ -0,0 +1,179 @@
+import { Component } from 'vue';
+import { GraphQLClient, Product, Contact, Customer } from '@propeller-commerce/propeller-sdk-v2';
+export interface ProductInfoProps {
+    /** The authenticated user (Contact or Customer) */
+    user: Contact | Customer | null;
+    /** Active company ID from the company switcher.
+     * Overrides default company for price calculation.
+     * Triggers a re-fetch when changed. */
+    companyId?: number;
+    /**
+     * Pre-fetched product object to display.
+     * When provided the component skips internal fetching.
+     */
+    product?: Product;
+    /**
+     * Product ID to fetch data for when no `product` prop is provided.
+     * Requires `graphqlClient` to be set.
+     */
+    productId?: number;
+    /**
+     * Initialised Propeller SDK GraphQL client.
+     * Required when `productId` is provided for internal data fetching.
+     */
+    graphqlClient?: GraphQLClient;
+    /**
+     * Image search filter passed to ProductService.getProduct().
+     * Controls how many image items are returned.
+     * Example: { page: 1, offset: 20 }
+     */
+    imageSearchFilters?: any;
+    /**
+     * Image variant transformation filter passed to ProductService.getProduct().
+     * Controls image size/format variants returned with the product.
+     * Example: imageVariantFiltersLarge from @/data/defaults
+     * Defaults to { transformations: [] } when omitted.
+     */
+    imageVariantFilters?: any;
+    /**
+     * Tax zone to use for price calculation.
+     */
+    taxZone?: string;
+    /**
+     * Called once the product data is loaded — either immediately (when
+     * `product` prop is supplied) or after the internal fetch completes.
+     * Use this to hydrate sibling components (gallery, price, descriptions, etc.).
+     */
+    onProductLoaded?: (product: Product) => void;
+    /** Show the product name. Defaults to true. */
+    showTitle?: boolean;
+    /** Show the product SKU. Defaults to true. */
+    showSku?: boolean;
+    /** Language code used to resolve localised names. Defaults to 'NL'. */
+    language?: string;
+    /** Extra CSS class applied to the root element. */
+    className?: string;
+    /**
+     * Config object providing imageSearchFiltersGrid and imageVariantFiltersSmall.
+     */
+    configuration?: any;
+    /**
+     * Attribute codes/names to look up and display as badge overlays on the product image.
+     * Each code is resolved against `product.attributes.items[].attributeDescription.code`
+     * (or `.name`). Attributes with no matching value are silently omitted.
+     * Example: ['new', 'sale']
+     */
+    imageLabels?: string[];
+    /**
+     * Attribute codes/names to look up and display as extra text rows below the product name.
+     * Resolved the same way as `imageLabels`.
+     * Example: ['brand', 'color']
+     */
+    textLabels?: string[];
+    showImage?: boolean;
+    showBadges?: boolean;
+    showFavorite?: boolean;
+    showPrice?: boolean;
+    showStock?: boolean;
+    showAddToCart?: boolean;
+    showBundles?: boolean;
+    showBulkPrices?: boolean;
+    showSurcharges?: boolean;
+    imageComponent?: Component;
+    badgesComponent?: Component;
+    favoriteComponent?: Component;
+    priceComponent?: Component;
+    stockComponent?: Component;
+    addToCartComponent?: Component;
+    bundlesComponent?: Component;
+    bulkPricesComponent?: Component;
+    surchargesComponent?: Component;
+    includeTax?: boolean;
+    currency?: string;
+    /**
+     * Override any UI string.
+     * Forwarded down to nested default components in the new shell.
+     */
+    labels?: Record<string, string>;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        beforeContent?(_: {
+            product: Product | null;
+        }): any;
+        image?(_: {
+            product: Product;
+            language: string | undefined;
+            imageSearchFilters: any;
+            imageVariantFilters: any;
+        }): any;
+        badges?(_: {
+            product: Product;
+            labels: Record<string, string> | undefined;
+        }): any;
+        title?(_: {
+            product: Product | null;
+            name: string;
+        }): any;
+        sku?(_: {
+            product: Product | null;
+            sku: string;
+        }): any;
+        favorite?(_: {
+            product: Product;
+            user: Contact | Customer | null;
+        }): any;
+        price?(_: {
+            product: Product;
+            price: import('@propeller-commerce/propeller-sdk-v2').ProductPrice;
+            includeTax: boolean | undefined;
+            currency: string | undefined;
+            labels: Record<string, string> | undefined;
+        }): any;
+        stock?(_: {
+            product: Product;
+            inventory: import('@propeller-commerce/propeller-sdk-v2').ProductInventory;
+            showStock: boolean;
+            showAvailability: boolean;
+            labels: Record<string, string> | undefined;
+        }): any;
+        addToCart?(_: {
+            product: Product;
+            cartId: undefined;
+            labels: Record<string, string> | undefined;
+        }): any;
+        bundles?(_: {
+            product: Product;
+            labels: Record<string, string> | undefined;
+        }): any;
+        bulkPrices?(_: {
+            product: Product;
+            bulkPrices: import('@propeller-commerce/propeller-sdk-v2').ProductPrice[];
+            includeTax: boolean | undefined;
+            labels: Record<string, string> | undefined;
+        }): any;
+        surcharges?(_: {
+            product: Product;
+            includeTax: boolean | undefined;
+            labels: Record<string, string> | undefined;
+        }): any;
+        afterContent?(_: {
+            product: Product | null;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ProductInfoProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ProductInfoProps> & Readonly<{}>, {
+    showSku: boolean;
+    showTitle: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ProductJsonLd.vue.d.ts

@@ -0,0 +1,10 @@
+import { Product } from '@propeller-commerce/propeller-sdk-v2';
+import { JsonLdContext } from '@propeller-commerce/propeller-v2-core-ui';
+export interface ProductJsonLdProps {
+    /** The product to describe. */
+    product: Product;
+    /** Per-request context: siteUrl, language, currency, portalMode, user, URL builders. */
+    context: JsonLdContext;
+}
+declare const _default: import('vue').DefineComponent<ProductJsonLdProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ProductJsonLdProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/ProductPrice.vue.d.ts

@@ -0,0 +1,42 @@
+import { ClusterOption, Contact, Customer, Product, ProductPrice } from '@propeller-commerce/propeller-sdk-v2';
+export interface ProductPriceProps {
+    /**
+     * ProductPrice object from the product.
+     * Obtain from `product.price`.
+     */
+    price: ProductPrice;
+    /** Currency symbol to display. Defaults to '€'. */
+    currency?: string;
+    /**
+     * Controls portal visibility mode.
+     * 'open'        — full e-commerce; price is always visible.
+     * 'semi-closed' — catalog-only; price is hidden for anonymous users.
+     * Defaults to 'open'.
+     */
+    portalMode?: string;
+    /** Authenticated user — used for semi-closed visibility. */
+    user?: Contact | Customer | null;
+    /**
+     * When true, net price (incl. tax) is the leading price.
+     * When false (default), gross price (excl. tax) is the leading price.
+     * Note: in the Propeller SDK `price.gross` = excl. VAT, `price.net` = incl. VAT.
+     */
+    includeTax?: boolean;
+    /** Tax zone code. Defaults to 'NL'. */
+    taxZone?: string;
+    /** Cluster options (cluster.options). Required option default prices are added even without an active selection. */
+    options?: ClusterOption[];
+    /** Active option product selections — pass Object.values(selectedOptionProducts). Price updates on every change. */
+    selectedOptionProducts?: Product[];
+    /**
+     * Override any UI string.
+     * Available keys: inclTax, exclTax, loginToSeePrices
+     */
+    labels?: Record<string, string>;
+    /** Tailwind text-size class for the leading price. Defaults to 'text-3xl'. */
+    priceSize?: string;
+    /** Extra CSS class applied to the root element. */
+    className?: string;
+}
+declare const _default: import('vue').DefineComponent<ProductPriceProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ProductPriceProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/ProductShortDescription.vue.d.ts

@@ -0,0 +1,18 @@
+import { Product, Cluster } from '@propeller-commerce/propeller-sdk-v2';
+export interface ProductShortDescriptionProps {
+    /**
+     * Product or Cluster object.
+     * The component reads `product.shortDescriptions` (an array of LocalizedString)
+     * and renders the matching language entry as HTML.
+     */
+    product: Product | Cluster;
+    /**
+     * Language code used to resolve the correct localised short description.
+     * Defaults to 'NL'.
+     */
+    language?: string;
+    /** Extra CSS class applied to the root element. */
+    className?: string;
+}
+declare const _default: import('vue').DefineComponent<ProductShortDescriptionProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ProductShortDescriptionProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;