@vendure/dashboard 3.4.2-master-202509081248 → 3.4.2-master-202509110229

package/src/app/routes/_authenticated/_sellers/sellers_.$id.tsx

@@ -28,7 +28,7 @@ export const Route = createFileRoute('/_authenticated/_sellers/sellers_/$id')({
         pageId,
         queryDocument: sellerDetailDocument,
         breadcrumb: (isNew, entity) => [
-            { path: '/sellers', label: 'Sellers' },
+            { path: '/sellers', label: <Trans>Sellers</Trans> },
             isNew ? <Trans>New seller</Trans> : entity?.name,
         ],
     }),
@@ -55,14 +55,14 @@ function SellerDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast(i18n.t('Successfully updated seller'));
+            toast(i18n.t(creatingNewEntity ? 'Successfully created seller' : 'Successfully updated seller'));
             form.reset(form.getValues());
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
-            toast(i18n.t('Failed to update seller'), {
+            toast(i18n.t(creatingNewEntity ? 'Failed to create seller' : 'Failed to update seller'), {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },
@@ -78,7 +78,7 @@ function SellerDetailPage() {
                             type="submit"
                             disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
                         >
-                            <Trans>Update</Trans>
+                            {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
                         </Button>
                     </PermissionGuard>
                 </PageActionBarRight>

package/src/app/routes/_authenticated/_shipping-methods/shipping-methods_.$id.tsx

@@ -39,7 +39,7 @@ export const Route = createFileRoute('/_authenticated/_shipping-methods/shipping
         queryDocument: shippingMethodDetailDocument,
         breadcrumb(isNew, entity) {
             return [
-                { path: '/shipping-methods', label: 'Shipping methods' },
+                { path: '/shipping-methods', label: <Trans>Shipping Methods</Trans> },
                 isNew ? <Trans>New shipping method</Trans> : entity?.name,
             ];
         },
@@ -84,14 +84,14 @@ function ShippingMethodDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast.success(i18n.t('Successfully updated shipping method'));
+            toast.success(i18n.t(creatingNewEntity ? 'Successfully created shipping method' : 'Successfully updated shipping method'));
             resetForm();
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
-            toast.error(i18n.t('Failed to update shipping method'), {
+            toast.error(i18n.t(creatingNewEntity ? 'Failed to create shipping method' : 'Failed to update shipping method'), {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },
@@ -109,7 +109,7 @@ function ShippingMethodDetailPage() {
                             type="submit"
                             disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
                         >
-                            <Trans>Update</Trans>
+                            {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
                         </Button>
                     </PermissionGuard>
                 </PageActionBarRight>

package/src/app/routes/_authenticated/_stock-locations/stock-locations_.$id.tsx

@@ -35,7 +35,7 @@ export const Route = createFileRoute('/_authenticated/_stock-locations/stock-loc
         queryDocument: stockLocationDetailQuery,
         breadcrumb(isNew, entity) {
             return [
-                { path: '/stock-locations', label: 'Stock locations' },
+                { path: '/stock-locations', label: <Trans>Stock Locations</Trans> },
                 isNew ? <Trans>New stock location</Trans> : entity?.name,
             ];
         },
@@ -64,14 +64,14 @@ function StockLocationDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast.success(i18n.t('Successfully updated stock location'));
+            toast.success(i18n.t(creatingNewEntity ? 'Successfully created stock location' : 'Successfully updated stock location'));
             resetForm();
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
-            toast.error(i18n.t('Failed to update stock location'), {
+            toast.error(i18n.t(creatingNewEntity ? 'Failed to create stock location' : 'Failed to update stock location'), {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },
@@ -89,7 +89,7 @@ function StockLocationDetailPage() {
                             type="submit"
                             disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
                         >
-                            <Trans>Update</Trans>
+                            {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
                         </Button>
                     </PermissionGuard>
                 </PageActionBarRight>

package/src/app/routes/_authenticated/_system/healthchecks.tsx

@@ -10,6 +10,7 @@ import { uiConfig } from 'virtual:vendure-ui-config';
 
 export const Route = createFileRoute('/_authenticated/_system/healthchecks')({
     component: HealthchecksPage,
+    loader: () => ({ breadcrumb: () => <Trans>Healthchecks</Trans> }),
 });
 
 interface HealthcheckItem {

package/src/app/routes/_authenticated/_tax-categories/tax-categories_.$id.tsx

@@ -35,7 +35,7 @@ export const Route = createFileRoute('/_authenticated/_tax-categories/tax-catego
         queryDocument: taxCategoryDetailDocument,
         breadcrumb(isNew, entity) {
             return [
-                { path: '/tax-categories', label: 'Tax categories' },
+                { path: '/tax-categories', label: <Trans>Tax Categories</Trans> },
                 isNew ? <Trans>New tax category</Trans> : entity?.name,
             ];
         },
@@ -63,14 +63,14 @@ function TaxCategoryDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast.success(i18n.t('Successfully updated tax category'));
+            toast.success(i18n.t(creatingNewEntity ? 'Successfully created tax category' : 'Successfully updated tax category'));
             form.reset(form.getValues());
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
-            toast.error(i18n.t('Failed to update tax category'), {
+            toast.error(i18n.t(creatingNewEntity ? 'Failed to create tax category' : 'Failed to update tax category'), {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },
@@ -88,7 +88,7 @@ function TaxCategoryDetailPage() {
                             type="submit"
                             disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
                         >
-                            <Trans>Update</Trans>
+                            {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
                         </Button>
                     </PermissionGuard>
                 </PageActionBarRight>

package/src/app/routes/_authenticated/_tax-rates/tax-rates_.$id.tsx

@@ -34,7 +34,7 @@ export const Route = createFileRoute('/_authenticated/_tax-rates/tax-rates_/$id'
         queryDocument: taxRateDetailDocument,
         breadcrumb(isNew, entity) {
             return [
-                { path: '/tax-rates', label: 'Tax rates' },
+                { path: '/tax-rates', label: <Trans>Tax Rates</Trans> },
                 isNew ? <Trans>New tax rate</Trans> : entity?.name,
             ];
         },
@@ -67,14 +67,14 @@ function TaxRateDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast.success(i18n.t('Successfully updated tax rate'));
+            toast.success(i18n.t(creatingNewEntity ? 'Successfully created tax rate' : 'Successfully updated tax rate'));
             resetForm();
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
-            toast.error(i18n.t('Failed to update tax rate'), {
+            toast.error(i18n.t(creatingNewEntity ? 'Failed to create tax rate' : 'Failed to update tax rate'), {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },
@@ -90,7 +90,7 @@ function TaxRateDetailPage() {
                             type="submit"
                             disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
                         >
-                            <Trans>Update</Trans>
+                            {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
                         </Button>
                     </PermissionGuard>
                 </PageActionBarRight>
@@ -120,6 +120,7 @@ function TaxRateDetailPage() {
                             label={<Trans>Rate</Trans>}
                             render={({ field }) => (
                                 <AffixedInput
+                                    {...field}
                                     type="number"
                                     suffix="%"
                                     value={field.value}

package/src/app/routes/_authenticated/_zones/zones_.$id.tsx

@@ -30,7 +30,7 @@ export const Route = createFileRoute('/_authenticated/_zones/zones_/$id')({
         pageId,
         queryDocument: zoneDetailDocument,
         breadcrumb(isNew, entity) {
-            return [{ path: '/zones', label: 'Zones' }, isNew ? <Trans>New zone</Trans> : entity?.name];
+            return [{ path: '/zones', label: <Trans>Zones</Trans> }, isNew ? <Trans>New zone</Trans> : entity?.name];
         },
     }),
     errorComponent: ({ error }) => <ErrorPage message={error.message} />,
@@ -56,14 +56,14 @@ function ZoneDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast.success(i18n.t('Successfully updated zone'));
+            toast.success(i18n.t(creatingNewEntity ? 'Successfully created zone' : 'Successfully updated zone'));
             resetForm();
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
-            toast.error(i18n.t('Failed to update zone'), {
+            toast.error(i18n.t(creatingNewEntity ? 'Failed to create zone' : 'Failed to update zone'), {
                 description: err instanceof Error ? err.message : 'Unknown error',
             });
         },
@@ -79,7 +79,7 @@ function ZoneDetailPage() {
                             type="submit"
                             disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
                         >
-                            <Trans>Update</Trans>
+                            {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
                         </Button>
                     </PermissionGuard>
                 </PageActionBarRight>

package/src/lib/components/data-input/affixed-input.tsx

@@ -10,6 +10,24 @@ export type AffixedInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>
         suffix?: ReactNode;
     };
 
+/**
+ * @description
+ * A component for displaying an input with a prefix and/or a suffix.
+ * 
+ * @example
+ * ```tsx
+ * <AffixedInput
+ *     {...field}
+ *     type="number"
+ *     suffix="%"
+ *     value={field.value}
+ *     onChange={e => field.onChange(e.target.valueAsNumber)}
+ * />
+ * ```
+ * 
+ * @docsCategory form-components
+ * @docsPage AffixedInput
+ */
 export function AffixedInput({ prefix, suffix, className = '', ...props }: Readonly<AffixedInputProps>) {
     const readOnly = props.disabled || isReadonlyField(props.fieldDef);
     const prefixRef = useRef<HTMLSpanElement>(null);

package/src/lib/components/data-input/boolean-input.tsx

@@ -2,6 +2,13 @@ import { Switch } from '@/vdb/components/ui/switch.js';
 import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
 
+/**
+ * @description
+ * Displays a boolean value as a switch toggle.
+ *
+ * @docsCategory form-components
+ * @docsPage BooleanInput
+ */
 export function BooleanInput({ value, onChange, fieldDef }: Readonly<DashboardFormComponentProps>) {
     const checked = typeof value === 'string' ? value === 'true' : value;
     const readOnly = isReadonlyField(fieldDef);

package/src/lib/components/data-input/checkbox-input.tsx

@@ -2,6 +2,13 @@ import { Checkbox } from '../ui/checkbox.js';
 import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
 
+/**
+ * @description
+ * Displays a boolean value as a checkbox.
+ *
+ * @docsCategory form-components
+ * @docsPage CheckboxInput
+ */
 export function CheckboxInput({ value, onChange, fieldDef }: Readonly<DashboardFormComponentProps>) {
     const readOnly = isReadonlyField(fieldDef);
     return <Checkbox checked={value} onCheckedChange={onChange} disabled={readOnly} />;

package/src/lib/components/data-input/datetime-input.tsx

@@ -12,6 +12,13 @@ import { cn } from '@/vdb/lib/utils.js';
 import { CalendarClock } from 'lucide-react';
 import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
 
+/**
+ * @description
+ * A component for selecting a date and time.
+ *
+ * @docsCategory form-components
+ * @docsPage DateTimeInput
+ */
 export function DateTimeInput({ value, onChange, fieldDef }: Readonly<DashboardFormComponentProps>) {
     const readOnly = isReadonlyField(fieldDef);
     const date = value && value instanceof Date ? value.toISOString() : (value ?? '');

package/src/lib/components/data-input/money-input.tsx

@@ -11,6 +11,14 @@ export interface MoneyInputProps extends DashboardFormComponentProps {
     currency?: string;
 }
 
+/**
+ * @description
+ * A component for displaying a money value. The `currency` can be specified, but otherwise
+ * will be taken from the active channel's default currency.
+ *
+ * @docsCategory form-components
+ * @docsPage MoneyInput
+ */
 export function MoneyInput(props: Readonly<MoneyInputProps>) {
     const { value, onChange, currency, ...rest } = props;
     const { activeChannel } = useChannel();

package/src/lib/components/data-input/number-input.tsx

@@ -4,6 +4,13 @@ import { Input } from '@/vdb/components/ui/input.js';
 import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
 
+/**
+ * @description
+ * A component for displaying a numeric value.
+ *
+ * @docsCategory form-components
+ * @docsPage NumberInput
+ */
 export function NumberInput({ fieldDef, onChange, ...fieldProps }: Readonly<DashboardFormComponentProps>) {
     const readOnly = fieldProps.disabled || isReadonlyField(fieldDef);
     const isFloat = fieldDef ? fieldDef.type === 'float' : false;

package/src/lib/components/data-input/password-input.tsx

@@ -2,6 +2,13 @@ import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-en
 import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
 import { Input } from '../ui/input.js';
 
+/**
+ * @description
+ * A component for displaying a password input.
+ *
+ * @docsCategory form-components
+ * @docsPage PasswordInput
+ */
 export function PasswordInput(props: Readonly<DashboardFormComponentProps>) {
     const readOnly = props.disabled || isReadonlyField(props.fieldDef);
     return (

package/src/lib/components/data-input/rich-text-input.tsx

@@ -22,6 +22,13 @@ const extensions = [
     }),
 ];
 
+/**
+ * @description
+ * A component for displaying a rich text editor. Internally uses ProseMirror (rich text editor) under the hood.
+ *
+ * @docsCategory form-components
+ * @docsPage RichTextInput
+ */
 export function RichTextInput({ value, onChange, fieldDef }: Readonly<DashboardFormComponentProps>) {
     const readOnly = isReadonlyField(fieldDef);
     const isInternalUpdate = useRef(false);

package/src/lib/components/data-input/text-input.tsx

@@ -3,6 +3,13 @@ import { Input } from '@/vdb/components/ui/input.js';
 import { DashboardFormComponent } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
 
+/**
+ * @description
+ * A component for displaying a text input.
+ *
+ * @docsCategory form-components
+ * @docsPage TextInput
+ */
 export const TextInput: DashboardFormComponent = ({ value, onChange, fieldDef }) => {
     const readOnly = isReadonlyField(fieldDef);
     return <Input value={value || ''} onChange={e => onChange(e.target.value)} disabled={readOnly} />;

package/src/lib/components/data-input/textarea-input.tsx

@@ -2,6 +2,13 @@ import { Textarea } from '@/vdb/components/ui/textarea.js';
 import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
 
+/**
+ * @description
+ * A component for displaying a textarea input.
+ *
+ * @docsCategory form-components
+ * @docsPage TextareaInput
+ */
 export function TextareaInput(props: Readonly<DashboardFormComponentProps>) {
     const readOnly = props.disabled || isReadonlyField(props.fieldDef);
     return (

package/src/lib/components/data-table/data-table-view-options.tsx

@@ -16,6 +16,7 @@ import {
     DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from '@/vdb/components/ui/dropdown-menu.js';
+import { ScrollArea } from '@/vdb/components/ui/scroll-area.js';
 import { usePage } from '@/vdb/hooks/use-page.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { Trans } from '@/vdb/lib/trans.js';
@@ -76,39 +77,41 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
 
     return (
         <div className="flex items-center gap-2">
-            <DropdownMenu>
+            <DropdownMenu modal={false}>
                 <DropdownMenuTrigger asChild>
                     <Button variant="ghost" size="sm" className="ml-auto hidden h-8 lg:flex">
                         <Settings2 />
                         <Trans>Columns</Trans>
                     </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                    <DndContext
-                        collisionDetection={closestCenter}
-                        onDragEnd={handleDragEnd}
-                        modifiers={[restrictToVerticalAxis]}
-                    >
-                        <SortableContext
-                            items={columns.map(col => col.id)}
-                            strategy={verticalListSortingStrategy}
+                <DropdownMenuContent align="end" className="overflow-auto">
+                    <ScrollArea className="max-h-[60vh]" type="always">
+                        <DndContext
+                            collisionDetection={closestCenter}
+                            onDragEnd={handleDragEnd}
+                            modifiers={[restrictToVerticalAxis]}
                         >
-                            {columns.map(column => (
-                                <SortableItem key={column.id} id={column.id}>
-                                    <DropdownMenuCheckboxItem
-                                        className="capitalize"
-                                        checked={column.getIsVisible()}
-                                        onCheckedChange={value => column.toggleVisibility(!!value)}
-                                        onSelect={e => e.preventDefault()}
-                                    >
-                                        {column.id}
-                                    </DropdownMenuCheckboxItem>
-                                </SortableItem>
-                            ))}
-                        </SortableContext>
-                    </DndContext>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem onClick={handleReset}>Reset</DropdownMenuItem>
+                            <SortableContext
+                                items={columns.map(col => col.id)}
+                                strategy={verticalListSortingStrategy}
+                            >
+                                {columns.map(column => (
+                                    <SortableItem key={column.id} id={column.id}>
+                                        <DropdownMenuCheckboxItem
+                                            className="capitalize"
+                                            checked={column.getIsVisible()}
+                                            onCheckedChange={value => column.toggleVisibility(!!value)}
+                                            onSelect={e => e.preventDefault()}
+                                        >
+                                            {column.id}
+                                        </DropdownMenuCheckboxItem>
+                                    </SortableItem>
+                                ))}
+                            </SortableContext>
+                        </DndContext>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem onClick={handleReset}>Reset</DropdownMenuItem>
+                    </ScrollArea>
                 </DropdownMenuContent>
             </DropdownMenu>
         </div>

package/src/lib/components/data-table/data-table.tsx

@@ -35,6 +35,14 @@ export interface FacetedFilter {
     options?: DataTableFacetedFilterOption[];
 }
 
+/**
+ * @description
+ * Props for configuring the {@link DataTable}.
+ *
+ * @docsCategory list-views
+ * @docsPage DataTable
+ * @since 3.4.0
+ */
 interface DataTableProps<TData> {
     children?: React.ReactNode;
     columns: ColumnDef<TData, any>[];
@@ -55,6 +63,7 @@ interface DataTableProps<TData> {
     disableViewOptions?: boolean;
     bulkActions?: BulkAction[];
     /**
+     * @description
      * This property allows full control over _all_ features of TanStack Table
      * when needed.
      */
@@ -62,6 +71,17 @@ interface DataTableProps<TData> {
     onRefresh?: () => void;
 }
 
+/**
+ * @description
+ * A data table which includes sorting, filtering, pagination, bulk actions, column controls etc.
+ *
+ * This is the building block of all data tables in the Dashboard.
+ *
+ * @docsCategory list-views
+ * @docsPage DataTable
+ * @since 3.4.0
+ * @docsWeight 0
+ */
 export function DataTable<TData>({
     children,
     columns,

package/src/lib/components/data-table/types.ts

@@ -1 +1,40 @@
+import { CellContext } from '@tanstack/table-core';
+
 export type ColumnDataType = 'String' | 'Int' | 'Float' | 'DateTime' | 'Boolean' | 'ID' | 'Money';
+
+/**
+ * @description
+ * This type is used to define re-usable components that can render a table cell in a
+ * DataTable.
+ *
+ * @example
+ * ```ts
+ * import { DataTableCellComponent } from '\@vendure/dashboard';
+ *
+ * type CustomerCellData = {
+ *     customer: {
+ *         id: string;
+ *         firstName: string;
+ *         lastName: string;
+ *     } | null;
+ * };
+ *
+ * export const CustomerCell: DataTableCellComponent<CustomerCellData> = ({ row }) => {
+ *     const value = row.original.customer;
+ *     if (!value) {
+ *         return null;
+ *     }
+ *     return (
+ *         <Button asChild variant="ghost">
+ *             <Link to={`/customers/${value.id}`}>
+ *                 {value.firstName} {value.lastName}
+ *             </Link>
+ *         </Button>
+ *     );
+ * };
+ * ```
+ *
+ * @docsCategory list-views
+ * @since 3.4.0
+ */
+export type DataTableCellComponent<T> = <Data extends T>(context: CellContext<Data, any>) => any;

package/src/lib/components/layout/channel-switcher.tsx

@@ -54,9 +54,7 @@ export function ChannelSwitcher() {
         setContentLanguage,
     } = useUserSettings();
     const [showManageLanguagesDialog, setShowManageLanguagesDialog] = useState(false);
-
-    // Use the selected channel if available, otherwise fall back to the active channel
-    const displayChannel = activeChannel || activeChannel;
+    const displayChannel = activeChannel;
 
     // Get available languages from server config
     const availableLanguages = serverConfig?.availableLanguages || [];