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

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

@@ -0,0 +1,24 @@
+export interface PriceToggleProps {
+    /**
+     * Label text shown beside the toggle.
+     * Defaults to 'Prices:'.
+     */
+    label?: string;
+    /** Translated labels keyed by the slugs used inside the component
+     * (`pricesLabel`, `inclVat`, `exclVat`). Missing keys fall back to English. */
+    labels?: Record<string, string>;
+    /**
+     * Initial state of the toggle.
+     * Defaults to true (incl. VAT).
+     */
+    initialState?: boolean;
+    /**
+     * Required callback fired when the toggle is switched.
+     * Receives the new state: true = incl. VAT, false = excl. VAT.
+     */
+    inclExclVatSwitched: (on: boolean) => void;
+    /** Extra CSS class applied to the root element. */
+    className?: string;
+}
+declare const _default: import('vue').DefineComponent<PriceToggleProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<PriceToggleProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,35 @@
+import { ProductPrice, Contact, Customer } from '@propeller-commerce/propeller-sdk-v2';
+export interface ProductBulkPricesProps {
+    /**
+     * Bulk price tiers from the product.
+     * Obtain from `product.bulkPrices`.
+     */
+    bulkPrices: ProductPrice[];
+    /** Currency symbol to display. Defaults to '€'. */
+    currency?: string;
+    /**
+     * When true, net price (incl. tax) is the leading price.
+     * Defaults to false — gross (excl. VAT) is shown.
+     * Note: in the Propeller SDK `price.gross` = excl. VAT, `price.net` = incl. VAT.
+     */
+    includeTax?: boolean;
+    /**
+     * Controls portal visibility mode.
+     * 'semi-closed' — component is hidden for anonymous users.
+     * Defaults to 'open'.
+     */
+    portalMode?: string;
+    /** Authenticated user — used for semi-closed visibility. */
+    user?: Contact | Customer | null;
+    /** Tax zone code. Defaults to 'NL'. */
+    taxZone?: string;
+    /**
+     * Override any UI string.
+     * Available keys: title, quantityFrom, price, inclTax, exclTax
+     */
+    labels?: Record<string, string>;
+    /** Extra CSS class applied to the root element. */
+    className?: string;
+}
+declare const _default: import('vue').DefineComponent<ProductBulkPricesProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ProductBulkPricesProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,88 @@
+import { Bundle, Cart, Contact, Customer, GraphQLClient } from '@propeller-commerce/propeller-sdk-v2';
+export interface ProductBundlesProps {
+    /** GraphQL client instance used to fetch bundle data. */
+    graphqlClient: GraphQLClient;
+    /** Currency symbol to display. Defaults to '€'. */
+    currency?: string;
+    /** ID of the product whose bundles should be fetched. */
+    productId: number;
+    /** Language code used for content (e.g. 'NL', 'EN'). */
+    language: string;
+    /** Tax zone code used for pricing (e.g. 'NL'). */
+    taxZone: string;
+    /**
+     * When true, net price (incl. tax) is the leading price.
+     * Note: in the Propeller SDK `price.gross` = excl. VAT, `price.net` = incl. VAT.
+     */
+    includeTax?: boolean;
+    /**
+     * Controls portal visibility mode.
+     * 'semi-closed' — prices and add-to-cart are hidden for anonymous users.
+     * Defaults to 'open'.
+     */
+    portalMode?: string;
+    /** Authenticated user — used for semi-closed visibility check. */
+    user?: Contact | Customer | null;
+    /** Active company ID from the company switcher.
+     * Overrides user's default company for cart creation and lookup.
+     * If not provided, the user's default company is used.
+     */
+    companyId?: number;
+    /** Cart ID — required when onAddToCart is not provided */
+    cartId?: string;
+    /**
+     * Callback to handle a new cart being created.
+     * WARNING: If not provided the component create new carts on every add-to-cart.
+     */
+    onCartCreated?: (cart: Cart) => void;
+    /**
+     * If true a new cart is created if no cart ID is provided.
+     * Defaults to false.
+     */
+    createCart?: boolean;
+    /** When true, stock availability is validated before adding to cart. */
+    stockValidation?: boolean;
+    /**
+     * When true, the individual bundle items are listed inside each bundle card.
+     * Defaults to true.
+     */
+    showIndividualItems?: boolean;
+    /** Additional configuration object passed through to the component. */
+    configuration?: any;
+    /**
+     * Layout variant for the bundle display.
+     * - 'vertical' — stacked layout
+     * - 'horizontal' — side-by-side (default)
+     * - 'compact' — condensed, hides individual items
+     */
+    layout?: "vertical" | "horizontal" | "compact";
+    /**
+     * Override any UI string.
+     * Available keys: title, condition_ALL, condition_EP, leaderItem,
+     * youSave, adding, addToCart, loginToSeePrices, addedToCart,
+     * modalTitle, continueShopping, proceedToCheckout, noCartId
+     */
+    labels?: Record<string, string>;
+    /**
+     * When true a modal popup is shown after a successful add-to-cart
+     * with buttons to continue shopping or proceed to checkout.
+     * Defaults to false (only a brief inline toast is shown).
+     */
+    showModal?: boolean;
+    /** Callback fired when the "Proceed to checkout" modal button is clicked */
+    onProceedToCheckout?: () => void;
+    /**
+     * Callback triggered before adding the bundle to cart.
+     */
+    beforeBundleAddToCart?: (bundleId: string, quantity: number) => boolean;
+    /** Called when the user clicks "Add bundle to cart". Receives bundleId and quantity (always 1). */
+    onAddBundleToCart?: (bundleId: string, quantity: number) => void;
+    /**
+     * Callback triggered after adding the bundle to cart.
+     */
+    afterBundleAddToCart?: (cart: Cart, bundle?: Bundle) => void;
+    /** Extra CSS class applied to the root wrapper element. */
+    className?: string;
+}
+declare const _default: import('vue').DefineComponent<ProductBundlesProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ProductBundlesProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,332 @@
+import { Component } from 'vue';
+import { GraphQLClient, Product, Contact, Customer, Cart, CartMainItem, CartChildItemInput } from '@propeller-commerce/propeller-sdk-v2';
+export interface ProductCardProps {
+    /** The product object to display */
+    product: Product;
+    /** Currency symbol to display. Defaults to '€'. */
+    currency?: string;
+    /** Show the product name. Defaults to true. */
+    showName?: boolean;
+    /** Show the product image. Defaults to true. */
+    showImage?: boolean;
+    /** Show the product short description. Defaults to false. */
+    showShortDescription?: boolean;
+    /** Show the product SKU. Defaults to true. */
+    showSku?: boolean;
+    /** Show the product manufacturer. Defaults to false. */
+    showManufacturer?: boolean;
+    /**
+     * Show the stock / availability widget below the product name.
+     * Uses the embedded `ItemStock` component driven by `product.inventory`.
+     * Defaults to false.
+     */
+    showStock?: boolean;
+    /**
+     * Show only the availability indicator (Available / Not available) inside ItemStock.
+     * Only relevant when `showStock` is true.
+     * Defaults to true.
+     */
+    showAvailability?: boolean;
+    /**
+     * Show the price below the product name.
+     * Defaults to true.
+     */
+    showPrice?: boolean;
+    /**
+     * Show the AddToCart component.
+     * Defaults to true.
+     */
+    allowAddToCart?: boolean;
+    /**
+     * Label overrides forwarded to the embedded ItemStock component.
+     * Keys: inStock, outOfStock, lowStock, available, notAvailable, pieces
+     */
+    stockLabels?: Record<string, string>;
+    /** Translated labels forwarded to the embedded `<ProductPrice>` display.
+     * See `ProductPriceProps.labels` for slugs (inclTax, exclTax, loginToSeePrices). */
+    priceLabels?: Record<string, string>;
+    /**
+     * 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[];
+    /**
+     * Override any UI string.
+     * Available keys: addToFavorites, removeFromFavorites
+     */
+    labels?: Record<string, string>;
+    /** Renders a heart-icon toggle button on the product image. Defaults to false. */
+    enableAddFavorite?: boolean;
+    /**
+     * Called whenever the favourite state is toggled.
+     * The second argument indicates the new state: `true` = added, `false` = removed.
+     */
+    onToggleFavorite?: (product: Product, isFavorite: boolean) => void;
+    /**
+     * Called when the product name or image is clicked.
+     * When provided, the default `<a>` navigation is prevented so the consumer
+     * can use framework-specific routing (e.g. Next.js `router.push`).
+     */
+    onProductClick?: (product: Product) => void;
+    /**
+     * When true, tax-inclusive price (net) is the leading price.
+     * When false, tax-exclusive price (gross) is shown.
+     * Defaults to false.
+     */
+    includeTax?: boolean;
+    /** Number of grid columns — when 1 the card renders as a compact horizontal row. */
+    columns?: number;
+    /** Extra CSS class applied to the root element. */
+    className?: string;
+    /**
+     * URL pattern controlling which segments appear in product links.
+     * Tokens: page → 'product', id → productId, slug → slug value.
+     * Examples: 'page/id/slug' (default) | 'page/slug' | 'page/id'
+     * Defaults to 'page/id/slug' when omitted.
+     */
+    urlPattern?: string;
+    /** Initialised Propeller SDK GraphQL client (required by embedded AddToCart). */
+    graphqlClient: GraphQLClient;
+    /** Authenticated user — used for cart creation / lookup. */
+    user: Contact | Customer | null;
+    /** ID of an existing cart to add items to. */
+    cartId?: string;
+    /** Config object providing imageSearchFiltersGrid and imageVariantFiltersSmall. */
+    configuration?: any;
+    /** Cluster ID for configurable products. */
+    clusterId?: number;
+    /** Product IDs of selected cluster child options. */
+    childItems?: number[];
+    /** Free-text notes attached to the cart item. */
+    notes?: string;
+    /** Custom unit price override. Omit to use calculated price. */
+    price?: number;
+    /**
+     * When true and no cartId is available, the embedded AddToCart automatically
+     * looks up or creates a cart. Always pair with onCartCreated.
+     */
+    createCart?: boolean;
+    /** Called after a new cart is created internally by AddToCart. */
+    onCartCreated?: (cart: Cart) => void;
+    /**
+     * Fully replaces the internal CartService.addItemToCart call inside AddToCart.
+     * Must return a Cart object.
+     */
+    onAddToCart?: (product: Product, clusterId?: number, quantity?: number, childItems?: CartChildItemInput[], notes?: string, price?: number, showModal?: boolean) => Cart;
+    /** Called after every successful add-to-cart. Receives the updated cart and the added item. */
+    afterAddToCart?: (cart: Cart, item?: CartMainItem) => void;
+    /**
+     * When true the embedded AddToCart shows a modal after a successful add
+     * instead of the default toast notification. Defaults to false.
+     */
+    showModal?: boolean;
+    /**
+     * Renders − and + buttons beside the quantity input in AddToCart.
+     * Defaults to true.
+     */
+    allowIncrDecr?: boolean;
+    /** Validate stock before adding to cart. Defaults to false. */
+    enableStockValidation?: boolean;
+    /** Language code forwarded to CartService operations. Defaults to 'NL'. */
+    language?: string;
+    /**
+     * Active company ID from the company switcher.
+     * When provided, overrides the user's default company for cart creation and lookup.
+     */
+    companyId?: number;
+    /** Called when the user clicks "Proceed to checkout" inside the AddToCart modal. */
+    onProceedToCheckout?: () => void;
+    /** Called when the user clicks "Request a Quote" inside the AddToCart modal. */
+    onRequestQuoteClick?: (cart: Cart) => void;
+    /** Label overrides for UI strings
+     *
+     * available labels:
+     * - outOfStock
+     * - noCartId
+     * - errorAdding
+     * - addedToCart
+     * - modalTitle
+     * - quantity
+     * - continueShopping
+     * - proceedToCheckout
+     * - requestQuoteButton
+     * - add
+     * - adding
+     */
+    addToCartLabels?: Record<string, string>;
+    priceComponent?: Component;
+    stockComponent?: Component;
+    addToCartComponent?: Component;
+    imageComponent?: Component;
+    badgesComponent?: Component;
+    favoriteComponent?: Component;
+}
+interface ProductCardState {
+    isFavorite: boolean;
+    includeTax: boolean;
+    priceListener: any;
+    getProductName: () => string;
+    getProductSku: () => string;
+    getProductImageUrl: () => string;
+    getProductPrice: () => string;
+    getProductUrl: () => string;
+    getProductShortDescription: () => string;
+    getProductManufacturer: () => string;
+    getLabel: (key: string, fallback: string) => string;
+    getAttributeValue: (code: string) => string;
+    handleProductClick: (e: any) => void;
+    handleToggleFavorite: (e: any) => void;
+    isRow: () => boolean;
+    computedImageLabels: () => string[];
+    computedTextLabels: () => {
+        name: string;
+        value: string;
+    }[];
+}
+declare function handleNavigate(): void;
+declare function handleProductClick(e: any): ReturnType<ProductCardState["handleProductClick"]>;
+declare function handleToggleFavorite(e: any): ReturnType<ProductCardState["handleToggleFavorite"]>;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        image?(_: {
+            product: Product;
+            language: string | undefined;
+            imageUrl: string;
+            imageSearchFilters: any;
+            imageVariantFilters: any;
+            onNavigate: typeof handleNavigate;
+        }): any;
+        badges?(_: {
+            product: Product;
+            imageLabels: string[];
+            labels: Record<string, string> | undefined;
+        }): any;
+        favorite?(_: {
+            product: Product;
+            isFavorite: boolean;
+            toggle: typeof handleToggleFavorite;
+            labels: Record<string, string> | undefined;
+        }): any;
+        sku?(_: {
+            product: Product;
+            sku: string;
+        }): any;
+        sku?(_: {
+            product: Product;
+            sku: string;
+        }): any;
+        name?(_: {
+            product: Product;
+            productUrl: string;
+            handleProductClick: typeof handleProductClick;
+            linkable: boolean;
+            name: string;
+            onNavigate: typeof handleNavigate;
+        }): any;
+        name?(_: {
+            product: Product;
+            productUrl: string;
+            handleProductClick: typeof handleProductClick;
+            linkable: boolean;
+            name: string;
+            onNavigate: typeof handleNavigate;
+        }): any;
+        textLabels?(_: {
+            product: Product;
+            values: {
+                name: string;
+                value: string;
+            }[];
+        }): any;
+        textLabels?(_: {
+            product: Product;
+            values: {
+                name: string;
+                value: string;
+            }[];
+        }): any;
+        manufacturer?(_: {
+            product: Product;
+            manufacturer: string;
+        }): any;
+        manufacturer?(_: {
+            product: Product;
+            manufacturer: string;
+        }): any;
+        shortDescription?(_: {
+            product: Product;
+            text: string;
+        }): any;
+        shortDescription?(_: {
+            product: Product;
+            text: string;
+        }): any;
+        stock?(_: {
+            product: Product;
+            inventory: import('@propeller-commerce/propeller-sdk-v2').ProductInventory | undefined;
+            showAvailability: boolean;
+            labels: Record<string, string> | undefined;
+        }): any;
+        stock?(_: {
+            product: Product;
+            inventory: import('@propeller-commerce/propeller-sdk-v2').ProductInventory | undefined;
+            showAvailability: boolean;
+            labels: Record<string, string> | undefined;
+        }): any;
+        price?(_: {
+            product: Product;
+            price: import('@propeller-commerce/propeller-sdk-v2').ProductPrice;
+            includeTax: boolean;
+            currency: string | undefined;
+            labels: Record<string, string> | undefined;
+        }): any;
+        price?(_: {
+            product: Product;
+            price: import('@propeller-commerce/propeller-sdk-v2').ProductPrice;
+            includeTax: boolean;
+            currency: string | undefined;
+            labels: Record<string, string> | undefined;
+        }): any;
+        addToCart?(_: {
+            product: Product;
+            cartId: string | undefined;
+            labels: Record<string, string> | undefined;
+        }): any;
+        addToCart?(_: {
+            product: Product;
+            cartId: string | undefined;
+            labels: Record<string, string> | undefined;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ProductCardProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ProductCardProps> & Readonly<{}>, {
+    showPrice: boolean;
+    showStock: boolean;
+    showAvailability: boolean;
+    enableAddFavorite: boolean;
+    allowAddToCart: boolean;
+    showSku: boolean;
+    showName: boolean;
+    showImage: boolean;
+    showShortDescription: boolean;
+    showManufacturer: 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/ProductDescription.vue.d.ts

@@ -0,0 +1,30 @@
+import { Product, Cluster } from '@propeller-commerce/propeller-sdk-v2';
+export interface ProductDescriptionProps {
+    /**
+     * Product or Cluster object.
+     * The component reads `product.descriptions` (an array of LocalizedString)
+     * and renders the matching language entry as HTML.
+     */
+    product: Product | Cluster;
+    /**
+     * Language code used to resolve the correct localised description.
+     * Defaults to 'NL'.
+     */
+    language?: string;
+    /**
+     * When true, the description is initially collapsed to `maxLength` characters.
+     * A "Read more" / "Read less" toggle is shown.
+     * Defaults to false.
+     */
+    collapsed?: boolean;
+    /**
+     * Maximum number of characters shown when collapsed.
+     * Set to 0 to display the entire description without truncation.
+     * Defaults to 0.
+     */
+    maxLength?: number;
+    /** Extra CSS class applied to the root element. */
+    className?: string;
+}
+declare const _default: import('vue').DefineComponent<ProductDescriptionProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ProductDescriptionProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,22 @@
+import { PaginatedMediaDocumentResponse } from '@propeller-commerce/propeller-sdk-v2';
+export interface ProductDownloadsProps {
+    /**
+     * Media documents for the product.
+     * Obtain from `product.media?.documents` — may be undefined when the
+     * product has no documents; the component renders an empty state.
+     */
+    downloads?: PaginatedMediaDocumentResponse;
+    /**
+     * Language code used to resolve the correct localised document URL and label.
+     */
+    language: string;
+    /**
+     * Override any UI string.
+     * Available keys: title, download, empty
+     */
+    labels?: Record<string, string>;
+    /** Extra CSS class applied to the root element. */
+    className?: string;
+}
+declare const _default: import('vue').DefineComponent<ProductDownloadsProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ProductDownloadsProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,25 @@
+export interface ProductGalleryProps {
+    /**
+     * Array of image URLs to display.
+     * Obtain from: `product.media?.images?.items?.[0]?.imageVariants?.map(v => v.url)`
+     * Component is in skeleton/loading state when this is an empty array.
+     */
+    images: string[];
+    /** Show image thumbnails below the main image. Defaults to true. */
+    showThumbnails?: boolean;
+    /** Enable cursor-zoom-in hint on the main image. Defaults to true. */
+    enableZoom?: boolean;
+    /** Enable fullscreen lightbox when clicking the main image. Defaults to true. */
+    enableLightbox?: boolean;
+    /** 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>;
+}
+declare const _default: import('vue').DefineComponent<ProductGalleryProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ProductGalleryProps> & Readonly<{}>, {
+    showThumbnails: boolean;
+    enableZoom: boolean;
+    enableLightbox: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;