npm - @vendure/dashboard - Versions diffs - 3.3.5-master-202506201217 → 3.3.5-master-202506201437 - Mend

@vendure/dashboard 3.3.5-master-202506201217 → 3.3.5-master-202506201437

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/plugin/vite-plugin-transform-index.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { Plugin } from 'vite';
+/**
+ * @description
+ * This Vite plugin handles the scenario where the `base` path is set in the Vite config.
+ * The default Vite behavior is to prepend the `base` path to all `href` and `src` attributes in the HTML,
+ * but this causes the Vendure Dashboard not to load its assets correctly.
+ *
+ * This plugin removes the `base` path from all `href` and `src` attributes in the HTML,
+ * and adds a `<base>` tag to the `<head>` of the HTML document.
+ */
+export declare function transformIndexHtmlPlugin(): Plugin;

package/dist/plugin/vite-plugin-transform-index.js ADDED Viewed

@@ -0,0 +1,35 @@
+/**
+ * @description
+ * This Vite plugin handles the scenario where the `base` path is set in the Vite config.
+ * The default Vite behavior is to prepend the `base` path to all `href` and `src` attributes in the HTML,
+ * but this causes the Vendure Dashboard not to load its assets correctly.
+ *
+ * This plugin removes the `base` path from all `href` and `src` attributes in the HTML,
+ * and adds a `<base>` tag to the `<head>` of the HTML document.
+ */
+export function transformIndexHtmlPlugin() {
+    let config;
+    return {
+        name: 'vendure:vite-config-transform-index-html',
+        configResolved(resolvedConfig) {
+            // store the resolved config
+            config = resolvedConfig;
+        },
+        // Only apply this plugin during the build phase
+        apply: 'build',
+        transformIndexHtml(html) {
+            if (config.base && config.base !== '/') {
+                // Remove the base path from hrefs and srcs
+                const basePath = config.base.replace(/\/$/, ''); // Remove trailing slash
+                // Single regex to handle both href and src attributes with any quote type
+                const attributeRegex = new RegExp(`(href|src)=(["'])${basePath}/?`, 'g');
+                let transformedHtml = html.replace(attributeRegex, '$1=$2');
+                // Add base tag to head
+                const baseTag = `        <base href="${config.base}">\n`;
+                transformedHtml = transformedHtml.replace(/<head>/, `<head>\n${baseTag}`);
+                return transformedHtml;
+            }
+            return html;
+        },
+    };
+}

package/dist/plugin/vite-plugin-vendure-dashboard.js CHANGED Viewed

@@ -8,6 +8,7 @@ import { viteConfigPlugin } from './vite-plugin-config.js';
 import { dashboardMetadataPlugin } from './vite-plugin-dashboard-metadata.js';
 import { gqlTadaPlugin } from './vite-plugin-gql-tada.js';
 import { themeVariablesPlugin } from './vite-plugin-theme.js';
+import { transformIndexHtmlPlugin } from './vite-plugin-transform-index.js';
 import { uiConfigPlugin } from './vite-plugin-ui-config.js';
 /**
  * @description
@@ -54,6 +55,7 @@ export function vendureDashboardPlugin(options) {
         ...(options.gqlTadaOutputPath
             ? [gqlTadaPlugin({ gqlTadaOutputPath: options.gqlTadaOutputPath, tempDir, packageRoot })]
             : []),
+        transformIndexHtmlPlugin(),
     ];
 }
 /**

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.3.5-master-202506201217",
+    "version": "3.3.5-master-202506201437",
     "type": "module",
     "repository": {
         "type": "git",
@@ -86,8 +86,8 @@
         "@types/react-dom": "^19.0.4",
         "@types/react-grid-layout": "^1.3.5",
         "@uidotdev/usehooks": "^2.4.1",
-        "@vendure/common": "^3.3.5-master-202506201217",
-        "@vendure/core": "^3.3.5-master-202506201217",
+        "@vendure/common": "^3.3.5-master-202506201437",
+        "@vendure/core": "^3.3.5-master-202506201437",
         "@vitejs/plugin-react": "^4.3.4",
         "awesome-graphql-client": "^2.1.0",
         "class-variance-authority": "^0.7.1",
@@ -130,5 +130,5 @@
         "lightningcss-linux-arm64-musl": "^1.29.3",
         "lightningcss-linux-x64-musl": "^1.29.1"
     },
-    "gitHead": "733914de4db29adb760af0104078ddfe6cf8a053"
+    "gitHead": "a3a70099c3e41947dd3626f530b01805d633ac5a"
 }

package/src/app/routes/_authenticated/_product-variants/product-variants.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Money } from '@/components/data-display/money.js';
 import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { PageActionBar } from '@/framework/layout-engine/page-layout.js';
+import { StockLevelLabel } from '@/components/shared/stock-level-label.js';
 import { ListPage } from '@/framework/page/list-page.js';
 import { useLocalFormat } from '@/hooks/use-local-format.js';
 import { Trans } from '@/lib/trans.js';
@@ -23,48 +23,19 @@ function ProductListPage() {
             customizeColumns={{
                 name: {
                     header: 'Product Name',
-                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+                    cell: ({ row: { original } }) => <DetailPageButton id={original.id} label={original.name} />,
                 },
                 currencyCode: {
-                    cell: ({ cell, row }) => {
-                        const value = cell.getValue();
-                        return formatCurrencyName(value as string, 'full');
-                    },
+                    cell: ({ row: { original } }) => formatCurrencyName(original.currencyCode, 'full'),
                 },
                 price: {
-                    cell: ({ cell, row }) => {
-                        const value = cell.getValue();
-                        const currencyCode = row.original.currencyCode;
-                        if (typeof value === 'number') {
-                            return <Money value={value} currency={currencyCode} />;
-                        }
-                        return value;
-                    },
+                    cell: ({ row: { original } }) => <Money value={original.price} currency={original.currencyCode} />,
                 },
                 priceWithTax: {
-                    cell: ({ cell, row }) => {
-                        const value = cell.getValue();
-                        const currencyCode = row.original.currencyCode;
-                        if (typeof value === 'number') {
-                            return <Money value={value} currency={currencyCode} />;
-                        }
-                        return value;
-                    },
+                    cell: ({ row: { original } }) => <Money value={original.priceWithTax} currency={original.currencyCode} />,
                 },
                 stockLevels: {
-                    cell: ({ cell, row }) => {
-                        const value = cell.getValue();
-                        if (Array.isArray(value)) {
-                            const totalOnHand = value.reduce((acc, curr) => acc + curr.stockOnHand, 0);
-                            const totalAllocated = value.reduce((acc, curr) => acc + curr.stockAllocated, 0);
-                            return (
-                                <span>
-                                    {totalOnHand} / {totalAllocated}
-                                </span>
-                            );
-                        }
-                        return value;
-                    },
+                    cell: ({ row: { original } }) => <StockLevelLabel stockLevels={original.stockLevels} />,
                 },
             }}
             onSearchTermChange={searchTerm => {

package/src/app/routes/_authenticated/_products/components/product-variants-table.tsx CHANGED Viewed

@@ -1,11 +1,11 @@
-import { PaginatedListDataTable, PaginatedListRefresherRegisterFn } from "@/components/shared/paginated-list-data-table.js";
-import { productVariantListDocument } from "../products.graphql.js";
-import { useState } from "react";
-import { ColumnFiltersState, SortingState } from "@tanstack/react-table";
 import { Money } from "@/components/data-display/money.js";
+import { PaginatedListDataTable, PaginatedListRefresherRegisterFn } from "@/components/shared/paginated-list-data-table.js";
+import { StockLevelLabel } from "@/components/shared/stock-level-label.js";
 import { useLocalFormat } from "@/hooks/use-local-format.js";
-import { Link } from "@tanstack/react-router";
-import { Button } from "@/components/ui/button.js";
+import { DetailPageButton } from "@/index.js";
+import { ColumnFiltersState, SortingState } from "@tanstack/react-table";
+import { useState } from "react";
+import { productVariantListDocument } from "../products.graphql.js";
 interface ProductVariantsTableProps {
     productId: string;
@@ -33,42 +33,19 @@ export function ProductVariantsTable({ productId, registerRefresher }: ProductVa
         customizeColumns={{
             name: {
                 header: 'Variant name',
-                cell: ({ row }) => {
-                    const variant = row.original as any;
-                    return (
-                        <Button asChild variant="ghost">
-                            <Link to={`../../product-variants/${variant.id}`}>{variant.name} </Link>
-                        </Button>
-                    );
-                },
+                cell: ({ row: { original } }) => <DetailPageButton href={`../../product-variants/${original.id}`} label={original.name} />,
             },
             currencyCode: {
-                cell: ({ cell, row }) => {
-                    const value = cell.getValue();
-                    return formatCurrencyName(value as string, 'full');
-                },
+                cell: ({ row: { original } }) => formatCurrencyName(original.currencyCode, 'full'),
             },
             price: {
-                cell: ({ cell, row }) => {
-                    const variant = row.original as any;
-                    const value = cell.getValue();
-                    const currencyCode = variant.currencyCode;
-                    if (typeof value === 'number') {
-                        return <Money value={value} currency={currencyCode} />;
-                    }
-                    return value;
-                },
+                cell: ({ row: { original } }) => <Money value={original.price} currency={original.currencyCode} />,
             },
             priceWithTax: {
-                cell: ({ cell, row }) => {
-                    const variant = row.original as any;
-                    const value = cell.getValue();
-                    const currencyCode = variant.currencyCode;
-                    if (typeof value === 'number') {
-                        return <Money value={value} currency={currencyCode} />;
-                    }
-                    return value;
-                },
+                cell: ({ row: { original } }) => <Money value={original.priceWithTax} currency={original.currencyCode} />,
+            },
+            stockLevels: {
+                cell: ({ row: { original } }) => <StockLevelLabel stockLevels={original.stockLevels} />,
             },
         }}
         page={page}

package/src/app/routes/_authenticated/_products/products.graphql.ts CHANGED Viewed

@@ -71,7 +71,12 @@ export const productVariantListDocument = graphql(`
                 currencyCode
                 price
                 priceWithTax
+                stockLevels {
+                    stockOnHand
+                    stockAllocated
+                }
             }
+            totalItems
         }
     }
 `);

package/src/lib/components/shared/detail-page-button.tsx CHANGED Viewed

@@ -4,16 +4,21 @@ import { Button } from '../ui/button.js';
 export function DetailPageButton({
     id,
+    href,
     label,
     disabled,
 }: {
-    id: string;
     label: string | React.ReactNode;
+    id?: string;
+    href?: string;
     disabled?: boolean;
 }) {
+    if (!id && !href) {
+        return <span>{label}</span>;
+    }
     return (
         <Button asChild variant="ghost" disabled={disabled}>
-            <Link to={`./${id}`}>
+            <Link to={href ?? `./${id}`}>
                 {label}
                 {!disabled && <ChevronRight className="h-3 w-3 text-muted-foreground" />}
             </Link>

package/src/lib/components/shared/paginated-list-data-table.tsx CHANGED Viewed

@@ -114,6 +114,14 @@ export type FacetedFilterConfig<T extends TypedDocumentNode<any, any>> = {
     [Key in AllItemFieldKeys<T>]?: FacetedFilter;
 };
+export type ListQueryFields<T extends TypedDocumentNode<any, any>> = {
+    [Key in keyof ResultOf<T>]: ResultOf<T>[Key] extends { items: infer U }
+        ? U extends any[]
+            ? U[number]
+            : never
+        : never;
+}[keyof ResultOf<T>];
 export type ListQueryShape =
     | {
           [key: string]: {
@@ -185,7 +193,7 @@ export type PaginatedListRefresherRegisterFn = (refreshFn: () => void) => void;
 export interface PaginatedListDataTableProps<
     T extends TypedDocumentNode<U, V>,
-    U extends any,
+    U extends ListQueryShape,
     V extends ListQueryOptionsShape,
     AC extends AdditionalColumns<T>,
 > {
@@ -195,7 +203,7 @@ export interface PaginatedListDataTableProps<
     transformVariables?: (variables: V) => V;
     customizeColumns?: CustomizeColumnConfig<T>;
     additionalColumns?: AC;
-    defaultColumnOrder?: (AllItemFieldKeys<T> | AC[number]['id'])[];
+    defaultColumnOrder?: (keyof ListQueryFields<T> | keyof AC | CustomFieldKeysOfItem<ListQueryFields<T>>)[];
     defaultVisibility?: Partial<Record<AllItemFieldKeys<T>, boolean>>;
     onSearchTermChange?: (searchTerm: string) => NonNullable<V['options']>['filter'];
     page: number;
@@ -407,10 +415,10 @@ export function PaginatedListDataTable<
             // appear as the first columns in sequence, and leave the remainder in the
             // existing order
             const orderedColumns = finalColumns
-                .filter(column => column.id && defaultColumnOrder.includes(column.id))
-                .sort((a, b) => defaultColumnOrder.indexOf(a.id) - defaultColumnOrder.indexOf(b.id));
+                .filter(column => column.id && defaultColumnOrder.includes(column.id as any))
+                .sort((a, b) => defaultColumnOrder.indexOf(a.id as any) - defaultColumnOrder.indexOf(b.id as any));
             const remainingColumns = finalColumns.filter(
-                column => !column.id || !defaultColumnOrder.includes(column.id),
+                column => !column.id || !defaultColumnOrder.includes(column.id as any),
             );
             finalColumns = [...orderedColumns, ...remainingColumns];
         }

package/src/lib/components/shared/stock-level-label.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import { useLingui } from '../../lib/trans.js';
+export type StockLevel = {
+    stockOnHand: number;
+    stockAllocated: number;
+};
+export function StockLevelLabel({ stockLevels }: { stockLevels: StockLevel[] }) {
+    const { i18n } = useLingui();
+    if (!Array.isArray(stockLevels)) {
+        return null;
+    }
+    const totalOnHand = stockLevels.reduce((acc, curr) => acc + curr.stockOnHand, 0);
+    const totalAllocated = stockLevels.reduce((acc, curr) => acc + curr.stockAllocated, 0);
+    return (
+        <span
+            title={`${i18n.t('Stock on hand')}: ${totalOnHand}, ${i18n.t('Stock allocated')}: ${totalAllocated}`}
+        >
+            {totalOnHand} <span className="text-muted-foreground">/ {totalAllocated}</span>
+        </span>
+    );
+}

package/src/lib/framework/page/list-page.tsx CHANGED Viewed

@@ -5,6 +5,7 @@ import {
     FacetedFilterConfig,
     ListQueryOptionsShape,
     ListQueryShape,
+    ListQueryFields,
     PaginatedListDataTable,
     RowAction,
 } from '@/components/shared/paginated-list-data-table.js';
@@ -13,7 +14,6 @@ import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { AnyRoute, AnyRouter, useNavigate } from '@tanstack/react-router';
 import { ColumnFiltersState, SortingState, Table } from '@tanstack/react-table';
 import { TableOptions } from '@tanstack/table-core';
-import { ResultOf } from 'gql.tada';
 import { addCustomFields } from '../document-introspection/add-custom-fields.js';
 import {
@@ -24,14 +24,6 @@ import {
     PageTitle,
 } from '../layout-engine/page-layout.js';
-type ListQueryFields<T extends TypedDocumentNode<any, any>> = {
-    [Key in keyof ResultOf<T>]: ResultOf<T>[Key] extends { items: infer U }
-        ? U extends any[]
-            ? U[number]
-            : never
-        : never;
-}[keyof ResultOf<T>];
 /**
  * @description
  * **Status: Developer Preview**

package/src/lib/index.ts CHANGED Viewed

@@ -67,6 +67,7 @@ export * from './components/shared/rich-text-editor.js';
 export * from './components/shared/role-code-label.js';
 export * from './components/shared/role-selector.js';
 export * from './components/shared/seller-selector.js';
+export * from './components/shared/stock-level-label.js';
 export * from './components/shared/tax-category-selector.js';
 export * from './components/shared/translatable-form-field.js';
 export * from './components/shared/vendure-image.js';

package/vite/vite-plugin-transform-index.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import { Plugin, ResolvedConfig } from 'vite';
+/**
+ * @description
+ * This Vite plugin handles the scenario where the `base` path is set in the Vite config.
+ * The default Vite behavior is to prepend the `base` path to all `href` and `src` attributes in the HTML,
+ * but this causes the Vendure Dashboard not to load its assets correctly.
+ *
+ * This plugin removes the `base` path from all `href` and `src` attributes in the HTML,
+ * and adds a `<base>` tag to the `<head>` of the HTML document.
+ */
+export function transformIndexHtmlPlugin(): Plugin {
+    let config: ResolvedConfig;
+    return {
+        name: 'vendure:vite-config-transform-index-html',
+        configResolved(resolvedConfig) {
+            // store the resolved config
+            config = resolvedConfig;
+        },
+        // Only apply this plugin during the build phase
+        apply: 'build',
+        transformIndexHtml(html) {
+            if (config.base && config.base !== '/') {
+                // Remove the base path from hrefs and srcs
+                const basePath = config.base.replace(/\/$/, ''); // Remove trailing slash
+                // Single regex to handle both href and src attributes with any quote type
+                const attributeRegex = new RegExp(`(href|src)=(["'])${basePath}/?`, 'g');
+                let transformedHtml = html.replace(attributeRegex, '$1=$2');
+                // Add base tag to head
+                const baseTag = `        <base href="${config.base}">\n`;
+                transformedHtml = transformedHtml.replace(/<head>/, `<head>\n${baseTag}`);
+                return transformedHtml;
+            }
+            return html;
+        },
+    };
+}

package/vite/vite-plugin-vendure-dashboard.ts CHANGED Viewed

@@ -10,6 +10,7 @@ import { viteConfigPlugin } from './vite-plugin-config.js';
 import { dashboardMetadataPlugin } from './vite-plugin-dashboard-metadata.js';
 import { gqlTadaPlugin } from './vite-plugin-gql-tada.js';
 import { ThemeVariablesPluginOptions, themeVariablesPlugin } from './vite-plugin-theme.js';
+import { transformIndexHtmlPlugin } from './vite-plugin-transform-index.js';
 import { UiConfigPluginOptions, uiConfigPlugin } from './vite-plugin-ui-config.js';
 /**
@@ -92,6 +93,7 @@ export function vendureDashboardPlugin(options: VitePluginVendureDashboardOption
         ...(options.gqlTadaOutputPath
             ? [gqlTadaPlugin({ gqlTadaOutputPath: options.gqlTadaOutputPath, tempDir, packageRoot })]
             : []),
+        transformIndexHtmlPlugin(),
     ];
 }