@vendure/dashboard 3.2.3 → 3.3.0

package/dist/plugin/vite-plugin-config-loader.js

@@ -1,24 +1,33 @@
-import { loadVendureConfig } from './config-loader.js';
+import { loadVendureConfig } from './utils/config-loader.js';
 export const configLoaderName = 'vendure:config-loader';
 /**
  * This Vite plugin loads the VendureConfig from the specified file path, and
  * makes it available to other plugins via the `ConfigLoaderApi`.
  */
 export function configLoaderPlugin(options) {
-    let vendureConfig;
+    let result;
     const onConfigLoaded = [];
     return {
         name: configLoaderName,
         async buildStart() {
-            this.info(`Loading Vendure config...`);
+            this.info(`Loading Vendure config. This can take a short while depending on the size of your project...`);
             try {
-                const result = await loadVendureConfig({
+                const startTime = Date.now();
+                result = await loadVendureConfig({
                     tempDir: options.tempDir,
                     vendureConfigPath: options.vendureConfigPath,
                     vendureConfigExport: options.vendureConfigExport,
+                    logger: {
+                        info: (message) => this.info(message),
+                        warn: (message) => this.warn(message),
+                        debug: (message) => this.debug(message),
+                    },
                 });
-                vendureConfig = result.vendureConfig;
-                this.info(`Vendure config loaded (using export "${result.exportedSymbolName}")`);
+                const endTime = Date.now();
+                const duration = endTime - startTime;
+                const pluginNames = result.pluginInfo.map(p => p.name).join(', ');
+                this.info(`Found ${result.pluginInfo.length} plugins: ${pluginNames}`);
+                this.info(`Vendure config loaded (using export "${result.exportedSymbolName}") in ${duration}ms`);
             }
             catch (e) {
                 if (e instanceof Error) {
@@ -29,13 +38,13 @@ export function configLoaderPlugin(options) {
         },
         api: {
             getVendureConfig() {
-                if (vendureConfig) {
-                    return Promise.resolve(vendureConfig);
+                if (result) {
+                    return Promise.resolve(result);
                 }
                 else {
                     return new Promise(resolve => {
                         onConfigLoaded.push(() => {
-                            resolve(vendureConfig);
+                            resolve(result);
                         });
                     });
                 }

package/dist/plugin/vite-plugin-config.js

@@ -3,17 +3,15 @@ export function viteConfigPlugin({ packageRoot }) {
     return {
         name: 'vendure:vite-config-plugin',
         config: (config) => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             config.root = packageRoot;
             config.resolve = {
-                alias: {
-                    '@': path.resolve(packageRoot, './src/lib'),
-                },
+                alias: Object.assign(Object.assign({}, ((_b = (_a = config.resolve) === null || _a === void 0 ? void 0 : _a.alias) !== null && _b !== void 0 ? _b : {})), { '@': path.resolve(packageRoot, './src/lib') }),
             };
             // This is required to prevent Vite from pre-bundling the
             // dashboard source when it resides in node_modules.
             config.optimizeDeps = Object.assign(Object.assign({}, config.optimizeDeps), { exclude: [
-                    ...(((_a = config.optimizeDeps) === null || _a === void 0 ? void 0 : _a.exclude) || []),
+                    ...(((_c = config.optimizeDeps) === null || _c === void 0 ? void 0 : _c.exclude) || []),
                     '@vendure/dashboard',
                     '@/providers',
                     '@/framework',
@@ -28,7 +26,7 @@ export function viteConfigPlugin({ packageRoot }) {
                 // on lodash which is a CJS packages and _does_ require
                 // pre-bundling.
                 include: [
-                    ...(((_b = config.optimizeDeps) === null || _b === void 0 ? void 0 : _b.include) || []),
+                    ...(((_d = config.optimizeDeps) === null || _d === void 0 ? void 0 : _d.include) || []),
                     '@/components > recharts',
                     '@/components > react-dropzone',
                 ] });

package/dist/plugin/vite-plugin-dashboard-metadata.js

@@ -1,4 +1,3 @@
-import { getPluginDashboardExtensions } from '@vendure/core';
 import path from 'path';
 import { getConfigLoaderApi } from './vite-plugin-config-loader.js';
 const virtualModuleId = 'virtual:dashboard-extensions';
@@ -10,7 +9,7 @@ const resolvedVirtualModuleId = `\0${virtualModuleId}`;
  */
 export function dashboardMetadataPlugin(options) {
     let configLoaderApi;
-    let vendureConfig;
+    let loadVendureConfigResult;
     return {
         name: 'vendure:dashboard-extensions-metadata',
         configResolved({ plugins }) {
@@ -24,21 +23,20 @@ export function dashboardMetadataPlugin(options) {
         async load(id) {
             var _a;
             if (id === resolvedVirtualModuleId) {
-                if (!vendureConfig) {
-                    vendureConfig = await configLoaderApi.getVendureConfig();
+                if (!loadVendureConfigResult) {
+                    loadVendureConfigResult = await configLoaderApi.getVendureConfig();
                 }
-                const extensions = getPluginDashboardExtensions((_a = vendureConfig.plugins) !== null && _a !== void 0 ? _a : []);
-                const extensionData = extensions.map(extension => {
-                    const providedPath = typeof extension === 'string' ? extension : extension.location;
-                    const jsPath = normalizeImportPath(options.rootDir, providedPath);
-                    return { importPath: `./${jsPath}` };
-                });
-                this.info(`Found ${extensionData.length} Dashboard extensions`);
+                const { pluginInfo } = loadVendureConfigResult;
+                const pluginsWithExtensions = (_a = pluginInfo === null || pluginInfo === void 0 ? void 0 : pluginInfo.map(({ dashboardEntryPath, pluginPath }) => dashboardEntryPath && path.join(pluginPath, dashboardEntryPath)).filter(x => x != null)) !== null && _a !== void 0 ? _a : [];
+                this.info(`Found ${pluginsWithExtensions.length} Dashboard extensions`);
                 return `
                     export async function runDashboardExtensions() {
-                        ${extensionData.map(extension => `await import('${extension.importPath}');`).join('\n')}
-                    }
-                `;
+                        ${pluginsWithExtensions
+                    .map(extension => {
+                    return `await import('${extension}');`;
+                })
+                    .join('\n')}
+                }`;
             }
         },
     };

package/dist/plugin/vite-plugin-gql-tada.js

@@ -2,7 +2,7 @@ import { generateOutput } from '@gql.tada/cli-utils';
 import * as fs from 'fs/promises';
 import { printSchema } from 'graphql';
 import * as path from 'path';
-import { generateSchema } from './schema-generator.js';
+import { generateSchema } from './utils/schema-generator.js';
 import { getConfigLoaderApi } from './vite-plugin-config-loader.js';
 export function gqlTadaPlugin(options) {
     let configLoaderApi;
@@ -12,7 +12,7 @@ export function gqlTadaPlugin(options) {
             configLoaderApi = getConfigLoaderApi(plugins);
         },
         async buildStart() {
-            const vendureConfig = await configLoaderApi.getVendureConfig();
+            const { vendureConfig } = await configLoaderApi.getVendureConfig();
             const safeSchema = await generateSchema({ vendureConfig });
             const tsConfigContent = {
                 compilerOptions: {

package/dist/plugin/vite-plugin-ui-config.js

@@ -1,5 +1,5 @@
 import path from 'path';
-import { getAdminUiConfig } from './ui-config.js';
+import { getAdminUiConfig } from './utils/ui-config.js';
 import { getConfigLoaderApi } from './vite-plugin-config-loader.js';
 const virtualModuleId = 'virtual:vendure-ui-config';
 const resolvedVirtualModuleId = `\0${virtualModuleId}`;
@@ -24,7 +24,8 @@ export function uiConfigPlugin({ adminUiConfig }) {
         async load(id) {
             if (id === resolvedVirtualModuleId) {
                 if (!vendureConfig) {
-                    vendureConfig = await configLoaderApi.getVendureConfig();
+                    const result = await configLoaderApi.getVendureConfig();
+                    vendureConfig = result.vendureConfig;
                 }
                 const config = getAdminUiConfig(vendureConfig, adminUiConfig);
                 return `

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.2.3",
+    "version": "3.3.0",
     "type": "module",
     "repository": {
         "type": "git",
@@ -46,6 +46,7 @@
     ],
     "dependencies": {
         "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/modifiers": "^9.0.0",
         "@dnd-kit/sortable": "^10.0.0",
         "@hookform/resolvers": "^4.1.3",
         "@lingui/babel-plugin-lingui-macro": "^5.2.0",
@@ -70,7 +71,7 @@
         "@radix-ui/react-switch": "^1.1.3",
         "@radix-ui/react-tabs": "^1.1.3",
         "@radix-ui/react-tooltip": "^1.1.8",
-        "@tailwindcss/vite": "^4.0.7",
+        "@tailwindcss/vite": "^4.1.5",
         "@tanstack/eslint-plugin-query": "^5.66.1",
         "@tanstack/react-query": "^5.66.7",
         "@tanstack/react-query-devtools": "^5.68.0",
@@ -85,8 +86,8 @@
         "@types/react-dom": "^19.0.4",
         "@types/react-grid-layout": "^1.3.5",
         "@uidotdev/usehooks": "^2.4.1",
-        "@vendure/common": "3.2.3",
-        "@vendure/core": "3.2.3",
+        "@vendure/common": "3.3.0",
+        "@vendure/core": "3.3.0",
         "@vitejs/plugin-react": "^4.3.4",
         "awesome-graphql-client": "^2.1.0",
         "class-variance-authority": "^0.7.1",
@@ -100,19 +101,19 @@
         "motion": "^12.6.2",
         "next-themes": "^0.4.6",
         "react": "^19.0.0",
-        "react-day-picker": "^8.10.1",
+        "react-day-picker": "^9.6.7",
         "react-dom": "^19.0.0",
         "react-dropzone": "^14.3.8",
         "react-grid-layout": "^1.5.1",
         "react-hook-form": "^7.54.2",
         "recharts": "^2.15.1",
         "sonner": "^2.0.1",
-        "tailwind-merge": "^3.0.1",
-        "tailwindcss": "^4.0.6",
+        "tailwind-merge": "^3.2.0",
+        "tailwindcss": "^4.1.5",
         "tailwindcss-animate": "^1.0.7",
-        "tw-animate-css": "^1.2.4",
-        "unplugin-swc": "^1.5.1",
-        "vite": "^6.1.0",
+        "tsconfig-paths": "^4.2.0",
+        "tw-animate-css": "^1.2.9",
+        "vite": "^6.3.5",
         "zod": "^3.24.2"
     },
     "devDependencies": {
@@ -125,5 +126,9 @@
         "globals": "^15.14.0",
         "vite-plugin-dts": "^4.5.3"
     },
-    "gitHead": "5383d7640d04ee772a9c5dbb5a0389c8b8951f66"
+    "optionalDependencies": {
+        "lightningcss-linux-arm64-musl": "^1.29.3",
+        "lightningcss-linux-x64-musl": "^1.29.1"
+    },
+    "gitHead": "a4c56359ec831b0c54dd01eab14fb75455c43ab7"
 }

package/src/app/app-providers.tsx

@@ -14,16 +14,16 @@ export function AppProviders({ children }: { children: React.ReactNode }) {
     return (
         <I18nProvider>
             <QueryClientProvider client={queryClient}>
-                <ServerConfigProvider>
-                    <UserSettingsProvider>
-                        <ThemeProvider defaultTheme="system">
-                            <AuthProvider>
+                <UserSettingsProvider>
+                    <ThemeProvider defaultTheme="system">
+                        <AuthProvider>
+                            <ServerConfigProvider>
                                 <ChannelProvider>{children}</ChannelProvider>
-                            </AuthProvider>
-                        </ThemeProvider>
-                    </UserSettingsProvider>
-                </ServerConfigProvider>
-                <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
+                            </ServerConfigProvider>
+                        </AuthProvider>
+                    </ThemeProvider>
+                </UserSettingsProvider>
+                {/*<ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />*/}
             </QueryClientProvider>
         </I18nProvider>
     );

package/src/app/main.tsx

@@ -46,7 +46,7 @@ function InnerApp() {
         }
         setCustomFieldsMap(serverConfig.entityCustomFields);
         setHasSetCustomFieldsMap(true);
-    }, [serverConfig?.entityCustomFields]);
+    }, [serverConfig?.entityCustomFields.length]);
 
     return (
         <>

package/src/app/routes/_authenticated/_assets/assets.graphql.ts

@@ -0,0 +1,26 @@
+import { assetFragment } from '@/graphql/fragments.js';
+import { graphql } from '@/graphql/graphql.js';
+
+export const assetDetailDocument = graphql(
+    `
+        query AssetDetail($id: ID!) {
+            asset(id: $id) {
+                ...Asset
+                tags {
+                    id
+                    value
+                }
+                customFields
+            }
+        }
+    `,
+    [assetFragment],
+);
+
+export const assetUpdateDocument = graphql(`
+    mutation AssetUpdate($input: UpdateAssetInput!) {
+        updateAsset(input: $input) {
+            id
+        }
+    }
+`);

package/src/app/routes/_authenticated/_assets/assets.tsx

@@ -1,4 +1,4 @@
-import { AssetGallery } from '@/components/shared/asset-gallery.js';
+import { AssetGallery } from '@/components/shared/asset/asset-gallery.js';
 import { Page, PageTitle, PageActionBar } from '@/framework/layout-engine/page-layout.js';
 import { Trans } from '@/lib/trans.js';
 import { createFileRoute } from '@tanstack/react-router';
@@ -13,7 +13,7 @@ function RouteComponent() {
             <PageTitle>
                 <Trans>Assets</Trans>
             </PageTitle>
-            <AssetGallery selectable={false} />
+            <AssetGallery selectable={true} multiSelect='manual' />
         </Page>
     );
 }

package/src/app/routes/_authenticated/_assets/assets_.$id.tsx

@@ -0,0 +1,156 @@
+import { AssetPreview } from '@/components/shared/asset/asset-preview.js'
+import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
+import { createFileRoute } from '@tanstack/react-router'
+import { assetDetailDocument, assetUpdateDocument } from './assets.graphql.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+import { ErrorPage } from '@/components/shared/error-page.js';
+import { toast } from 'sonner';
+import { Page, PageTitle, PageActionBar, PageActionBarRight, PageBlock, PageLayout, CustomFieldsPageBlock } from '@/framework/layout-engine/page-layout.js'
+import { useDetailPage } from '@/framework/page/use-detail-page.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { Button } from '@/components/ui/button.js';
+import { VendureImage } from '@/components/shared/vendure-image.js';
+import { useState, useRef } from 'react';
+import { PreviewPreset } from '@/components/shared/asset/asset-preview.js';
+import { AssetPreviewSelector } from '@/components/shared/asset/asset-preview-selector.js';
+import { AssetProperties } from '@/components/shared/asset/asset-properties.js';
+import { AssetFocalPointEditor } from '@/components/shared/asset/asset-focal-point-editor.js';
+import { FocusIcon } from 'lucide-react';
+import { Point } from '@/components/shared/asset/focal-point-control.js';
+import { Label } from '@/components/ui/label.js';
+export const Route = createFileRoute('/_authenticated/_assets/assets_/$id')({
+    component: AssetDetailPage,
+    loader: detailPageRouteLoader({
+        queryDocument: assetDetailDocument,
+        breadcrumb(isNew, entity) {
+            return [
+                { path: '/assets', label: 'Assets' },
+                isNew ? <Trans>New asset</Trans> : entity?.name ?? '',
+            ];
+        },
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function AssetDetailPage() {
+    const params = Route.useParams();
+    const { i18n } = useLingui();
+
+    const imageRef = useRef<HTMLImageElement>(null);
+    const [size, setSize] = useState<PreviewPreset>('medium');
+    const [width, setWidth] = useState(0);
+    const [height, setHeight] = useState(0);
+    const [focalPoint, setFocalPoint] = useState<Point | undefined>(undefined);
+    const [settingFocalPoint, setSettingFocalPoint] = useState(false);
+    const { form, submitHandler, entity, isPending } = useDetailPage({
+        queryDocument: assetDetailDocument,
+        updateDocument: assetUpdateDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                focalPoint: entity.focalPoint,
+                name: entity.name,
+                tags: entity.tags?.map(tag => tag.value) ?? [],
+                customFields: entity.customFields,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async () => {
+            toast(i18n.t('Successfully updated asset'));
+            form.reset(form.getValues());
+        },
+        onError: err => {
+            toast(i18n.t('Failed to update asset'), {
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    const updateDimensions = () => {
+        if (!imageRef.current) return;
+        const img = imageRef.current;
+        const imgWidth = img.naturalWidth;
+        const imgHeight = img.naturalHeight;
+        setWidth(imgWidth);
+        setHeight(imgHeight);
+    };
+
+    if (!entity) {
+        return null;
+    }
+    return (
+        <Page pageId="asset-detail" form={form} submitHandler={submitHandler}>
+            <PageTitle>
+                <Trans>Edit asset</Trans>
+            </PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateChannel']}>
+                        <Button
+                            type="submit"
+                            disabled={!form.formState.isDirty || isPending}
+                        >
+                            <Trans>Update</Trans>
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="main" blockId="asset-preview">
+                    <div className="relative flex items-center justify-center bg-muted/30 rounded-lg min-h-[300px] overflow-auto">
+                        <AssetFocalPointEditor
+                            width={width}
+                            height={height}
+                            settingFocalPoint={settingFocalPoint}
+                            focalPoint={form.getValues().focalPoint ?? { x: 0.5, y: 0.5 }}
+                            onFocalPointChange={(point) => {
+                                form.setValue('focalPoint.x', point.x, { shouldDirty: true });
+                                form.setValue('focalPoint.y', point.y, { shouldDirty: true });
+                                setSettingFocalPoint(false);
+                            }}
+                            onCancel={() => {
+                                setSettingFocalPoint(false);
+                            }}
+                        >
+                            <VendureImage
+                                ref={imageRef}
+                                asset={entity}
+                                preset={size || undefined}
+                                mode="resize"
+                                useFocalPoint={true}
+                                onLoad={updateDimensions}
+                                className="max-w-full max-h-full object-contain"
+                            />
+                        </AssetFocalPointEditor>
+                    </div>
+                </PageBlock>
+                <CustomFieldsPageBlock
+                    column="main"
+                    entityType={'Asset'}
+                    control={form.control}
+                />
+                <PageBlock column="side" blockId="asset-properties">
+                    <AssetProperties asset={entity} />
+                </PageBlock>
+                <PageBlock column="side" blockId="asset-size">
+                    <div className="flex flex-col gap-2">
+                        <AssetPreviewSelector size={size} setSize={setSize} width={width} height={height} />
+                        <div className="flex items-center gap-2">
+                            <Button type='button' variant="outline" size="icon" onClick={() => setSettingFocalPoint(true)}>
+                                <FocusIcon className="h-4 w-4" />
+                            </Button>
+                            <div className="text-sm text-muted-foreground">
+                                <Label><Trans>Focal Point</Trans></Label>
+                                <div className="text-sm text-muted-foreground">
+                                    {form.getValues().focalPoint?.x && form.getValues().focalPoint?.y
+                                        ? `${form.getValues().focalPoint?.x.toFixed(2)}, ${form.getValues().focalPoint?.y.toFixed(2)}`
+                                        : <Trans>Not set</Trans>}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    )
+}

package/src/app/routes/_authenticated/_orders/components/customer-address-selector.tsx

@@ -0,0 +1,104 @@
+import { Button } from '@/components/ui/button.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
+import { api } from '@/graphql/api.js';
+import { graphql, ResultOf } from '@/graphql/graphql.js';
+import { useQuery } from '@tanstack/react-query';
+import { Trans } from '@/lib/trans.js';
+import { useLingui } from '@/lib/trans.js';
+import { addressFragment } from '../../_customers/customers.graphql.js';
+import { Card } from '@/components/ui/card.js';
+import { cn } from '@/lib/utils.js';
+import { useState } from 'react';
+import { Plus } from 'lucide-react';
+
+const getCustomerAddressesDocument = graphql(
+    `
+        query GetCustomerAddresses($customerId: ID!) {
+            customer(id: $customerId) {
+                id
+                addresses {
+                    ...Address
+                }
+            }
+        }
+    `,
+    [addressFragment],
+);
+
+type CustomerAddressesQuery = ResultOf<typeof getCustomerAddressesDocument>;
+
+interface CustomerAddressSelectorProps {
+    customerId: string | undefined;
+    onSelect: (address: ResultOf<typeof addressFragment>) => void;
+}
+
+export function CustomerAddressSelector({ customerId, onSelect }: CustomerAddressSelectorProps) {
+    const { i18n } = useLingui();
+    const [open, setOpen] = useState(false);
+
+    const { data, isLoading } = useQuery<CustomerAddressesQuery>({
+        queryKey: ['customerAddresses', customerId],
+        queryFn: () => api.query(getCustomerAddressesDocument, { customerId: customerId ?? '' }),
+        enabled: !!customerId,
+    });
+
+    const addresses: ResultOf<typeof addressFragment>[] = data?.customer?.addresses || [];
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <div className="flex items-center gap-2">
+                    <Button variant="outline" size="sm" type="button" className="" disabled={!customerId}>
+                        <Plus className="h-4 w-4" />
+                        <Trans>Select address</Trans>
+                    </Button>
+                </div>
+            </PopoverTrigger>
+            <PopoverContent className="w-[400px] p-0" align="start">
+                <div className="p-4">
+                    <h4 className="mb-4">
+                        <Trans>Select an address</Trans>
+                    </h4>
+                    <div className="space-y-2">
+                        {isLoading ? (
+                            <div className="text-sm text-muted-foreground">
+                                <Trans>Loading addresses...</Trans>
+                            </div>
+                        ) : addresses.length === 0 ? (
+                            <div className="text-sm text-muted-foreground">
+                                <Trans>No addresses found</Trans>
+                            </div>
+                        ) : (
+                            addresses.map(address => (
+                                <Card
+                                    key={address.id}
+                                    className={cn(
+                                        'p-4 cursor-pointer hover:bg-accent transition-colors',
+                                    )}
+                                    onClick={() => {
+                                        onSelect(address);
+                                        setOpen(false);
+                                    }}
+                                >
+                                    <div className="flex flex-col gap-1 text-sm">
+                                        <div className="font-semibold">{address.fullName}</div>
+                                        {address.company && <div>{address.company}</div>}
+                                        <div>{address.streetLine1}</div>
+                                        {address.streetLine2 && <div>{address.streetLine2}</div>}
+                                        <div>
+                                            {address.city}
+                                            {address.province && `, ${address.province}`}
+                                        </div>
+                                        <div>{address.postalCode}</div>
+                                        <div>{address.country.name}</div>
+                                        {address.phoneNumber && <div>{address.phoneNumber}</div>}
+                                    </div>
+                                </Card>
+                            ))
+                        )}
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+}