@vendure/dashboard 3.2.0 → 3.2.2

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

@@ -1,73 +1,73 @@
-import { Button } from '@/components/ui/button.js';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger,
-} from '@/components/ui/dialog.js';
-import { DataTableFilterDialog } from '@/components/data-table/data-table-filter-dialog.js';
-import { FieldInfo } from '@/framework/document-introspection/get-document-structure.js';
-import { camelCaseToTitleCase } from '@/lib/utils.js';
-import { Trans } from '@/lib/trans.js';
-import { ColumnDef, HeaderContext } from '@tanstack/table-core';
-import { ArrowDown, ArrowUp, ArrowUpDown, EllipsisVertical, Filter } from 'lucide-react';
-import React from 'react';
-
-export interface DataTableColumnHeaderProps {
-    customConfig: Partial<ColumnDef<any>>;
-    headerContext: HeaderContext<any, any>;
-}
-
-export function DataTableColumnHeader({ headerContext, customConfig }: DataTableColumnHeaderProps) {
-    const { column } = headerContext;
-    const isSortable = column.getCanSort();
-    const isFilterable = column.getCanFilter();
-
-    const customHeader = customConfig.header;
-    let display = camelCaseToTitleCase(column.id);
-    if (typeof customHeader === 'function') {
-        display = customHeader(headerContext);
-    } else if (typeof customHeader === 'string') {
-        display = customHeader;
-    }
-
-    const columSort = column.getIsSorted();
-    const columnFilter = column.getFilterValue();
-    const nextSort = columSort === 'asc' ? true : columSort === 'desc' ? undefined : false;
-
-    return (
-        <div className="flex items-center">
-            {isSortable && (
-                <Button size="icon-sm" variant="ghost" onClick={() => column.toggleSorting(nextSort)}>
-                    {columSort === 'desc' ? (
-                        <ArrowUp />
-                    ) : columSort === 'asc' ? (
-                        <ArrowDown />
-                    ) : (
-                        <ArrowUpDown className="opacity-50" />
-                    )}
-                </Button>
-            )}
-            <div>{display}</div>
-
-            {isFilterable && (
-                <Dialog>
-                    <DialogTrigger asChild>
-                        <Button size="icon-sm" variant="ghost">
-                            <Filter className={columnFilter ? '' : 'opacity-50'} />
-                        </Button>
-                    </DialogTrigger>
-                    <DataTableFilterDialog column={column} />
-                </Dialog>
-            )}
-        </div>
-    );
-}
+import { Button } from '@/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog.js';
+import { DataTableFilterDialog } from '@/components/data-table/data-table-filter-dialog.js';
+import { FieldInfo } from '@/framework/document-introspection/get-document-structure.js';
+import { camelCaseToTitleCase } from '@/lib/utils.js';
+import { Trans } from '@/lib/trans.js';
+import { ColumnDef, HeaderContext } from '@tanstack/table-core';
+import { ArrowDown, ArrowUp, ArrowUpDown, EllipsisVertical, Filter } from 'lucide-react';
+import React from 'react';
+
+export interface DataTableColumnHeaderProps {
+    customConfig: Partial<ColumnDef<any>>;
+    headerContext: HeaderContext<any, any>;
+}
+
+export function DataTableColumnHeader({ headerContext, customConfig }: DataTableColumnHeaderProps) {
+    const { column } = headerContext;
+    const isSortable = column.getCanSort();
+    const isFilterable = column.getCanFilter();
+
+    const customHeader = customConfig.header;
+    let display = camelCaseToTitleCase(column.id);
+    if (typeof customHeader === 'function') {
+        display = customHeader(headerContext);
+    } else if (typeof customHeader === 'string') {
+        display = customHeader;
+    }
+
+    const columSort = column.getIsSorted();
+    const columnFilter = column.getFilterValue();
+    const nextSort = columSort === 'asc' ? true : columSort === 'desc' ? undefined : false;
+
+    return (
+        <div className="flex items-center">
+            {isSortable && (
+                <Button size="icon-sm" variant="ghost" onClick={() => column.toggleSorting(nextSort)}>
+                    {columSort === 'desc' ? (
+                        <ArrowUp />
+                    ) : columSort === 'asc' ? (
+                        <ArrowDown />
+                    ) : (
+                        <ArrowUpDown className="opacity-50" />
+                    )}
+                </Button>
+            )}
+            <div>{display}</div>
+
+            {isFilterable && (
+                <Dialog>
+                    <DialogTrigger asChild>
+                        <Button size="icon-sm" variant="ghost">
+                            <Filter className={columnFilter ? '' : 'opacity-50'} />
+                        </Button>
+                    </DialogTrigger>
+                    <DataTableFilterDialog column={column} />
+                </Dialog>
+            )}
+        </div>
+    );
+}

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

@@ -1,172 +1,172 @@
-import * as React from 'react';
-import { Column } from '@tanstack/react-table';
-import { Check, FilterIcon, PlusCircle } from 'lucide-react';
-
-import { cn } from '@/lib/utils.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Button } from '@/components/ui/button.js';
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList,
-    CommandSeparator,
-} from '@/components/ui/command.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { Separator } from '@/components/ui/separator.js';
-
-export interface DataTableFacetedFilterOption {
-    label: string;
-    value: any;
-    icon?: React.ComponentType<{ className?: string }>;
-}
-
-export interface DataTableFacetedFilterProps<TData, TValue> {
-    column?: Column<TData, TValue>;
-    title?: string;
-    icon?: React.ComponentType<{ className?: string }>;
-    options?: DataTableFacetedFilterOption[];
-    optionsFn?: () => Promise<DataTableFacetedFilterOption[]>;
-}
-
-export function DataTableFacetedFilter<TData, TValue>({
-    column,
-    title,
-    icon,
-    options,
-    optionsFn,
-}: DataTableFacetedFilterProps<TData, TValue>) {
-    const facets = column?.getFacetedUniqueValues();
-    const filterValue = column?.getFilterValue();
-
-    const selectedValues = filterValue
-        ? new Set(Object.values(filterValue as Record<string, string>))
-        : new Set();
-
-    const [resolvedOptions, setResolvedOptions] = React.useState<DataTableFacetedFilterOption[]>(
-        options || [],
-    );
-    const [isLoading, setIsLoading] = React.useState(false);
-    const Icon = icon;
-
-    React.useEffect(() => {
-        if (optionsFn) {
-            setIsLoading(true);
-            optionsFn()
-                .then(result => {
-                    setResolvedOptions(result);
-                })
-                .catch(error => {
-                    console.error('Failed to load filter options:', error);
-                })
-                .finally(() => {
-                    setIsLoading(false);
-                });
-        } else if (options) {
-            setResolvedOptions(options);
-        }
-    }, [optionsFn]);
-
-    return (
-        <Popover>
-            <PopoverTrigger asChild>
-                <Button variant="outline" size="sm" className="h-8 border-dashed">
-                    {Icon && <Icon />}
-                    {!Icon && <FilterIcon />}
-                    {title}
-                    {selectedValues?.size > 0 && (
-                        <>
-                            <Separator orientation="vertical" className="mx-2 h-4" />
-                            <Badge variant="secondary" className="rounded-sm px-1 font-normal lg:hidden">
-                                {selectedValues.size}
-                            </Badge>
-                            <div className="hidden space-x-1 lg:flex">
-                                {selectedValues.size > 2 ? (
-                                    <Badge variant="secondary" className="rounded-sm px-1 font-normal">
-                                        {selectedValues.size} selected
-                                    </Badge>
-                                ) : (
-                                    resolvedOptions
-                                        .filter(option => selectedValues.has(option.value))
-                                        .map(option => (
-                                            <Badge
-                                                variant="secondary"
-                                                key={option.value}
-                                                className="rounded-sm px-1 font-normal"
-                                            >
-                                                {option.label}
-                                            </Badge>
-                                        ))
-                                )}
-                            </div>
-                        </>
-                    )}
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-[200px] p-0" align="start">
-                <Command>
-                    <CommandInput placeholder={title} />
-                    <CommandList>
-                        <CommandEmpty>No results found.</CommandEmpty>
-                        <CommandGroup>
-                            {resolvedOptions.map(option => {
-                                const isSelected = selectedValues.has(option.value);
-                                return (
-                                    <CommandItem
-                                        key={option.value}
-                                        onSelect={() => {
-                                            if (isSelected) {
-                                                selectedValues.delete(option.value);
-                                            } else {
-                                                selectedValues.add(option.value);
-                                            }
-                                            const filterValues = Array.from(selectedValues);
-                                            column?.setFilterValue(
-                                                filterValues.length ? filterValues : undefined,
-                                            );
-                                        }}
-                                    >
-                                        <div
-                                            className={cn(
-                                                'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
-                                                isSelected
-                                                    ? 'bg-primary text-primary-foreground'
-                                                    : 'opacity-50 [&_svg]:invisible',
-                                            )}
-                                        >
-                                            <Check />
-                                        </div>
-                                        {option.icon && (
-                                            <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
-                                        )}
-                                        <span>{option.label}</span>
-                                        {facets?.get(option.value) && (
-                                            <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
-                                                {facets.get(option.value)}
-                                            </span>
-                                        )}
-                                    </CommandItem>
-                                );
-                            })}
-                        </CommandGroup>
-                        {selectedValues.size > 0 && (
-                            <>
-                                <CommandSeparator />
-                                <CommandGroup>
-                                    <CommandItem
-                                        onSelect={() => column?.setFilterValue(undefined)}
-                                        className="justify-center text-center"
-                                    >
-                                        Clear filters
-                                    </CommandItem>
-                                </CommandGroup>
-                            </>
-                        )}
-                    </CommandList>
-                </Command>
-            </PopoverContent>
-        </Popover>
-    );
-}
+import * as React from 'react';
+import { Column } from '@tanstack/react-table';
+import { Check, FilterIcon, PlusCircle } from 'lucide-react';
+
+import { cn } from '@/lib/utils.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Button } from '@/components/ui/button.js';
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+    CommandSeparator,
+} from '@/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
+import { Separator } from '@/components/ui/separator.js';
+
+export interface DataTableFacetedFilterOption {
+    label: string;
+    value: any;
+    icon?: React.ComponentType<{ className?: string }>;
+}
+
+export interface DataTableFacetedFilterProps<TData, TValue> {
+    column?: Column<TData, TValue>;
+    title?: string;
+    icon?: React.ComponentType<{ className?: string }>;
+    options?: DataTableFacetedFilterOption[];
+    optionsFn?: () => Promise<DataTableFacetedFilterOption[]>;
+}
+
+export function DataTableFacetedFilter<TData, TValue>({
+    column,
+    title,
+    icon,
+    options,
+    optionsFn,
+}: DataTableFacetedFilterProps<TData, TValue>) {
+    const facets = column?.getFacetedUniqueValues();
+    const filterValue = column?.getFilterValue();
+
+    const selectedValues = filterValue
+        ? new Set(Object.values(filterValue as Record<string, string>))
+        : new Set();
+
+    const [resolvedOptions, setResolvedOptions] = React.useState<DataTableFacetedFilterOption[]>(
+        options || [],
+    );
+    const [isLoading, setIsLoading] = React.useState(false);
+    const Icon = icon;
+
+    React.useEffect(() => {
+        if (optionsFn) {
+            setIsLoading(true);
+            optionsFn()
+                .then(result => {
+                    setResolvedOptions(result);
+                })
+                .catch(error => {
+                    console.error('Failed to load filter options:', error);
+                })
+                .finally(() => {
+                    setIsLoading(false);
+                });
+        } else if (options) {
+            setResolvedOptions(options);
+        }
+    }, [optionsFn]);
+
+    return (
+        <Popover>
+            <PopoverTrigger asChild>
+                <Button variant="outline" size="sm" className="h-8 border-dashed">
+                    {Icon && <Icon />}
+                    {!Icon && <FilterIcon />}
+                    {title}
+                    {selectedValues?.size > 0 && (
+                        <>
+                            <Separator orientation="vertical" className="mx-2 h-4" />
+                            <Badge variant="secondary" className="rounded-sm px-1 font-normal lg:hidden">
+                                {selectedValues.size}
+                            </Badge>
+                            <div className="hidden space-x-1 lg:flex">
+                                {selectedValues.size > 2 ? (
+                                    <Badge variant="secondary" className="rounded-sm px-1 font-normal">
+                                        {selectedValues.size} selected
+                                    </Badge>
+                                ) : (
+                                    resolvedOptions
+                                        .filter(option => selectedValues.has(option.value))
+                                        .map(option => (
+                                            <Badge
+                                                variant="secondary"
+                                                key={option.value}
+                                                className="rounded-sm px-1 font-normal"
+                                            >
+                                                {option.label}
+                                            </Badge>
+                                        ))
+                                )}
+                            </div>
+                        </>
+                    )}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[200px] p-0" align="start">
+                <Command>
+                    <CommandInput placeholder={title} />
+                    <CommandList>
+                        <CommandEmpty>No results found.</CommandEmpty>
+                        <CommandGroup>
+                            {resolvedOptions.map(option => {
+                                const isSelected = selectedValues.has(option.value);
+                                return (
+                                    <CommandItem
+                                        key={option.value}
+                                        onSelect={() => {
+                                            if (isSelected) {
+                                                selectedValues.delete(option.value);
+                                            } else {
+                                                selectedValues.add(option.value);
+                                            }
+                                            const filterValues = Array.from(selectedValues);
+                                            column?.setFilterValue(
+                                                filterValues.length ? filterValues : undefined,
+                                            );
+                                        }}
+                                    >
+                                        <div
+                                            className={cn(
+                                                'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                                                isSelected
+                                                    ? 'bg-primary text-primary-foreground'
+                                                    : 'opacity-50 [&_svg]:invisible',
+                                            )}
+                                        >
+                                            <Check />
+                                        </div>
+                                        {option.icon && (
+                                            <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                                        )}
+                                        <span>{option.label}</span>
+                                        {facets?.get(option.value) && (
+                                            <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+                                                {facets.get(option.value)}
+                                            </span>
+                                        )}
+                                    </CommandItem>
+                                );
+                            })}
+                        </CommandGroup>
+                        {selectedValues.size > 0 && (
+                            <>
+                                <CommandSeparator />
+                                <CommandGroup>
+                                    <CommandItem
+                                        onSelect={() => column?.setFilterValue(undefined)}
+                                        className="justify-center text-center"
+                                    >
+                                        Clear filters
+                                    </CommandItem>
+                                </CommandGroup>
+                            </>
+                        )}
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}

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

@@ -1,73 +1,73 @@
-import { Button } from '@/components/ui/button.js';
-import {
-    DialogClose,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog.js';
-import { Input } from '@/components/ui/input.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
-import { Trans } from '@/lib/trans.js';
-import { Column } from '@tanstack/react-table';
-import React, { useState } from 'react';
-
-export interface DataTableFilterDialogProps {
-    column: Column<any>;
-}
-
-const STRING_OPERATORS = ['eq', 'notEq', 'contains', 'notContains', 'in', 'notIn', 'regex', 'isNull'];
-
-export function DataTableFilterDialog({ column }: DataTableFilterDialogProps) {
-    const columnFilter = column.getFilterValue() as Record<string, string> | undefined;
-    const [initialOperator, initialValue] = columnFilter ? Object.entries(columnFilter as any)[0] : [];
-    const [operator, setOperator] = useState<string>(initialOperator ?? 'contains');
-    const [value, setValue] = useState((initialValue as string) ?? '');
-    const columnId = column.id;
-    return (
-        <DialogContent>
-            <DialogHeader>
-                <DialogTitle>
-                    <Trans>Filter by {columnId}</Trans>
-                </DialogTitle>
-                <DialogDescription></DialogDescription>
-            </DialogHeader>
-            <div className="flex flex-col md:flex-row gap-2">
-                <Select value={operator} onValueChange={value => setOperator(value)}>
-                    <SelectTrigger>
-                        <SelectValue placeholder="Select operator" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        {STRING_OPERATORS.map(op => (
-                            <SelectItem key={op} value={op}>
-                                <Trans context="filter-operator">{op}</Trans>
-                            </SelectItem>
-                        ))}
-                    </SelectContent>
-                </Select>
-                <Input
-                    placeholder="Enter filter value..."
-                    value={value}
-                    onChange={e => setValue(e.target.value)}
-                />
-            </div>
-            <DialogFooter className="sm:justify-end">
-                {columnFilter && (
-                    <Button type="button" variant="secondary" onClick={e => column.setFilterValue(undefined)}>
-                        <Trans>Clear filter</Trans>
-                    </Button>
-                )}
-                <DialogClose asChild>
-                    <Button
-                        type="button"
-                        variant="secondary"
-                        onClick={e => column.setFilterValue({ [operator]: value })}
-                    >
-                        <Trans>Apply filter</Trans>
-                    </Button>
-                </DialogClose>
-            </DialogFooter>
-        </DialogContent>
-    );
-}
+import { Button } from '@/components/ui/button.js';
+import {
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog.js';
+import { Input } from '@/components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
+import { Trans } from '@/lib/trans.js';
+import { Column } from '@tanstack/react-table';
+import React, { useState } from 'react';
+
+export interface DataTableFilterDialogProps {
+    column: Column<any>;
+}
+
+const STRING_OPERATORS = ['eq', 'notEq', 'contains', 'notContains', 'in', 'notIn', 'regex', 'isNull'];
+
+export function DataTableFilterDialog({ column }: DataTableFilterDialogProps) {
+    const columnFilter = column.getFilterValue() as Record<string, string> | undefined;
+    const [initialOperator, initialValue] = columnFilter ? Object.entries(columnFilter as any)[0] : [];
+    const [operator, setOperator] = useState<string>(initialOperator ?? 'contains');
+    const [value, setValue] = useState((initialValue as string) ?? '');
+    const columnId = column.id;
+    return (
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>
+                    <Trans>Filter by {columnId}</Trans>
+                </DialogTitle>
+                <DialogDescription></DialogDescription>
+            </DialogHeader>
+            <div className="flex flex-col md:flex-row gap-2">
+                <Select value={operator} onValueChange={value => setOperator(value)}>
+                    <SelectTrigger>
+                        <SelectValue placeholder="Select operator" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {STRING_OPERATORS.map(op => (
+                            <SelectItem key={op} value={op}>
+                                <Trans context="filter-operator">{op}</Trans>
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                <Input
+                    placeholder="Enter filter value..."
+                    value={value}
+                    onChange={e => setValue(e.target.value)}
+                />
+            </div>
+            <DialogFooter className="sm:justify-end">
+                {columnFilter && (
+                    <Button type="button" variant="secondary" onClick={e => column.setFilterValue(undefined)}>
+                        <Trans>Clear filter</Trans>
+                    </Button>
+                )}
+                <DialogClose asChild>
+                    <Button
+                        type="button"
+                        variant="secondary"
+                        onClick={e => column.setFilterValue({ [operator]: value })}
+                    >
+                        <Trans>Apply filter</Trans>
+                    </Button>
+                </DialogClose>
+            </DialogFooter>
+        </DialogContent>
+    );
+}