@vendure/dashboard 3.4.1-master-202508040248 → 3.4.1-master-202508070243

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vendure/dashboard",
   "private": false,
-  "version": "3.4.1-master-202508040248",
+  "version": "3.4.1-master-202508070243",
   "type": "module",
   "repository": {
     "type": "git",
@@ -101,8 +101,8 @@
     "@types/react-dom": "^19.0.4",
     "@types/react-grid-layout": "^1.3.5",
     "@uidotdev/usehooks": "^2.4.1",
-    "@vendure/common": "^3.4.1-master-202508040248",
-    "@vendure/core": "^3.4.1-master-202508040248",
+    "@vendure/common": "^3.4.1-master-202508070243",
+    "@vendure/core": "^3.4.1-master-202508070243",
     "@vitejs/plugin-react": "^4.3.4",
     "acorn": "^8.11.3",
     "acorn-walk": "^8.3.2",
@@ -154,5 +154,5 @@
     "lightningcss-linux-arm64-musl": "^1.29.3",
     "lightningcss-linux-x64-musl": "^1.29.1"
   },
-  "gitHead": "db37b25aa195de9bbb384986f18e49c85e4a0ac7"
+  "gitHead": "46607c032b55593eedba7adb159940e8ea24bf97"
 }

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

@@ -50,6 +50,7 @@ function MoneyInputInternal({ value, currency, onChange }: DataInputComponentPro
     return (
         <AffixedInput
             type="text"
+            className="bg-background"
             value={displayValue}
             onChange={e => {
                 const inputValue = e.target.value;

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

@@ -22,10 +22,11 @@ const extensions = [
 
 export interface RichTextInputProps {
     value: string;
+    disabled?: boolean;
     onChange: (value: string) => void;
 }
 
-export function RichTextInput({ value, onChange }: Readonly<RichTextInputProps>) {
+export function RichTextInput({ value, onChange, disabled }: Readonly<RichTextInputProps>) {
     const isInternalUpdate = useRef(false);
 
     const editor = useEditor({
@@ -34,13 +35,16 @@ export function RichTextInput({ value, onChange }: Readonly<RichTextInputProps>)
         },
         extensions: extensions,
         content: value,
+        editable: !disabled,
         onUpdate: ({ editor }) => {
-            isInternalUpdate.current = true;
-            onChange(editor.getHTML());
+            if (!disabled) {
+                isInternalUpdate.current = true;
+                onChange(editor.getHTML());
+            }
         },
         editorProps: {
             attributes: {
-                class: 'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/10 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm max-h-[500px] overflow-y-auto',
+                class: `border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/10 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm max-h-[500px] overflow-y-auto ${disabled ? 'cursor-not-allowed opacity-50' : ''}`,
             },
         },
     });
@@ -57,6 +61,13 @@ export function RichTextInput({ value, onChange }: Readonly<RichTextInputProps>)
         isInternalUpdate.current = false;
     }, [value, editor]);
 
+    // Update editor's editable state when disabled prop changes
+    useLayoutEffect(() => {
+        if (editor) {
+            editor.setEditable(!disabled);
+        }
+    }, [disabled, editor]);
+
     if (!editor) {
         return null;
     }
@@ -64,13 +75,13 @@ export function RichTextInput({ value, onChange }: Readonly<RichTextInputProps>)
     return (
         <>
             <EditorContent editor={editor} />
-            <CustomBubbleMenu editor={editor} />
+            <CustomBubbleMenu editor={editor} disabled={disabled} />
         </>
     );
 }
 
-function CustomBubbleMenu({ editor }: { editor: Editor | null }) {
-    if (!editor) return null;
+function CustomBubbleMenu({ editor, disabled }: { editor: Editor | null; disabled?: boolean }) {
+    if (!editor || disabled) return null;
     return (
         <BubbleMenu editor={editor}>
             <div className="flex items-center gap-2 bg-background p-2 rounded-md border">
@@ -80,6 +91,7 @@ function CustomBubbleMenu({ editor }: { editor: Editor | null }) {
                     size="icon"
                     onClick={() => editor.chain().focus().toggleBold().run()}
                     className={editor.isActive('bold') ? 'bg-accent' : ''}
+                    disabled={disabled}
                 >
                     <BoldIcon className="w-4 h-4" />
                 </Button>
@@ -89,6 +101,7 @@ function CustomBubbleMenu({ editor }: { editor: Editor | null }) {
                     size="icon"
                     onClick={() => editor.chain().focus().toggleItalic().run()}
                     className={editor.isActive('italic') ? 'bg-accent' : ''}
+                    disabled={disabled}
                 >
                     <ItalicIcon className="w-4 h-4" />
                 </Button>
@@ -98,6 +111,7 @@ function CustomBubbleMenu({ editor }: { editor: Editor | null }) {
                     size="icon"
                     onClick={() => editor.chain().focus().toggleStrike().run()}
                     className={editor.isActive('strike') ? 'bg-accent' : ''}
+                    disabled={disabled}
                 >
                     <StrikethroughIcon className="w-4 h-4" />
                 </Button>

package/src/lib/components/shared/asset/asset-gallery.tsx

@@ -89,6 +89,7 @@ export interface AssetGalleryProps {
     className?: string;
     onFilesDropped?: (files: File[]) => void;
     bulkActions?: AssetBulkAction[];
+    displayBulkActions?: boolean;
 }
 
 export function AssetGallery({
@@ -102,6 +103,7 @@ export function AssetGallery({
     className = '',
     onFilesDropped,
     bulkActions,
+    displayBulkActions = true,
 }: AssetGalleryProps) {
     // State
     const [page, setPage] = useState(1);
@@ -272,7 +274,9 @@ export function AssetGallery({
             )}
 
             {/* Bulk actions bar */}
-            <AssetBulkActions selection={selected} bulkActions={bulkActions} refetch={refetch} />
+            {displayBulkActions ? (
+                <AssetBulkActions selection={selected} bulkActions={bulkActions} refetch={refetch} />
+            ) : null}
 
             <div
                 {...getRootProps()}
@@ -291,7 +295,10 @@ export function AssetGallery({
                     </div>
                 )}
 
-                <div data-asset-gallery className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 p-1">
+                <div
+                    data-asset-gallery
+                    className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 p-1"
+                >
                     {isLoading ? (
                         <div className="col-span-full flex justify-center py-12">
                             <Loader2 className="h-8 w-8 animate-spin text-primary" />

package/src/lib/components/shared/asset/asset-picker-dialog.tsx

@@ -50,6 +50,7 @@ export function AssetPickerDialog({
                         multiSelect="manual"
                         initialSelectedAssets={initialSelectedAssets}
                         fixedHeight={true}
+                        displayBulkActions={false}
                     />
                 </div>
 

package/src/lib/components/shared/configurable-operation-arg-input.tsx

@@ -1,16 +1,6 @@
-import { InputComponent } from '@/vdb/framework/component-registry/dynamic-component.js';
 import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
-import { RelationCustomFieldConfig } from '@vendure/common/lib/generated-types';
-import { ConfigArgType } from '@vendure/core';
-import { AffixedInput } from '../data-input/affixed-input.js';
-import { ConfigurableOperationListInput } from '../data-input/configurable-operation-list-input.js';
-import { DateTimeInput } from '../data-input/datetime-input.js';
-import { DefaultRelationInput } from '../data-input/default-relation-input.js';
-import { FacetValueInput } from '../data-input/facet-value-input.js';
-import { Input } from '../ui/input.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select.js';
-import { Switch } from '../ui/switch.js';
-import { Textarea } from '../ui/textarea.js';
+import { configArgToUniversal } from './universal-field-definition.js';
+import { UniversalFormInput } from './universal-form-input.js';
 
 export interface ConfigurableOperationArgInputProps {
     definition: ConfigurableOperationDefFragment['args'][number];
@@ -20,30 +10,6 @@ export interface ConfigurableOperationArgInputProps {
     position?: number;
 }
 
-/**
- * Maps Vendure UI component names to their corresponding Dashboard input component IDs
- */
-const UI_COMPONENT_MAP = {
-    'number-form-input': 'vendure:numberInput',
-    'currency-form-input': 'vendure:currencyInput',
-    'facet-value-form-input': 'facet-value-input',
-    'product-selector-form-input': 'vendure:productSelectorInput',
-    'customer-group-form-input': 'vendure:customerGroupInput',
-    'date-form-input': 'date-input',
-    'textarea-form-input': 'textarea-input',
-    'password-form-input': 'vendure:passwordInput',
-    'json-editor-form-input': 'vendure:jsonEditorInput',
-    'html-editor-form-input': 'vendure:htmlEditorInput',
-    'rich-text-form-input': 'vendure:richTextInput',
-    'boolean-form-input': 'boolean-input',
-    'select-form-input': 'select-input',
-    'text-form-input': 'vendure:textInput',
-    'product-multi-form-input': 'vendure:productMultiInput',
-    'combination-mode-form-input': 'vendure:combinationModeInput',
-    'relation-form-input': 'vendure:relationInput',
-    'struct-form-input': 'vendure:structInput',
-} as const;
-
 export function ConfigurableOperationArgInput({
     definition,
     value,
@@ -51,345 +17,20 @@ export function ConfigurableOperationArgInput({
     readOnly,
     position,
 }: Readonly<ConfigurableOperationArgInputProps>) {
-    const uiComponent = (definition.ui as any)?.component;
-    const argType = definition.type as ConfigArgType;
-    const isList = definition.list ?? false;
-
-    // Handle specific UI components first
-    if (uiComponent) {
-        switch (uiComponent) {
-            case 'product-selector-form-input': {
-                const entityType =
-                    (definition.ui as any)?.selectionMode === 'variant' ? 'ProductVariant' : 'Product';
-                const isMultiple = (definition.ui as any)?.multiple ?? false;
-                return (
-                    <DefaultRelationInput
-                        fieldDef={
-                            {
-                                entity: entityType,
-                                list: isMultiple,
-                            } as RelationCustomFieldConfig
-                        }
-                        field={{
-                            value,
-                            onChange,
-                            onBlur: () => {},
-                            name: '',
-                            ref: () => {},
-                        }}
-                        disabled={readOnly}
-                    />
-                );
-            }
-            case 'customer-group-form-input': {
-                const isCustomerGroupMultiple = (definition.ui as any)?.multiple ?? false;
-                return (
-                    <DefaultRelationInput
-                        fieldDef={
-                            {
-                                entity: 'CustomerGroup',
-                                list: isCustomerGroupMultiple,
-                            } as RelationCustomFieldConfig
-                        }
-                        field={{
-                            value,
-                            onChange,
-                            onBlur: () => {},
-                            name: '',
-                            ref: () => {},
-                        }}
-                        disabled={readOnly}
-                    />
-                );
-            }
-            case 'facet-value-form-input': {
-                return <FacetValueInput value={value} onChange={onChange} readOnly={readOnly} />;
-            }
-            case 'select-form-input': {
-                return (
-                    <SelectInput
-                        definition={definition}
-                        value={value}
-                        onChange={onChange}
-                        readOnly={readOnly}
-                    />
-                );
-            }
-            case 'textarea-form-input': {
-                return (
-                    <TextareaInput
-                        definition={definition}
-                        value={value}
-                        onChange={onChange}
-                        readOnly={readOnly}
-                    />
-                );
-            }
-            case 'date-form-input': {
-                return <DateTimeInput value={value} onChange={onChange} disabled={readOnly} />;
-            }
-            case 'boolean-form-input': {
-                return <BooleanInput value={value} onChange={onChange} readOnly={readOnly} />;
-            }
-            case 'number-form-input': {
-                return (
-                    <NumberInput
-                        definition={definition}
-                        value={value}
-                        onChange={onChange}
-                        readOnly={readOnly}
-                    />
-                );
-            }
-            case 'currency-form-input': {
-                return (
-                    <CurrencyInput
-                        definition={definition}
-                        value={value}
-                        onChange={onChange}
-                        readOnly={readOnly}
-                    />
-                );
-            }
-            default: {
-                // Try to use the component registry for other UI components
-                const componentId = UI_COMPONENT_MAP[uiComponent as keyof typeof UI_COMPONENT_MAP];
-                if (componentId) {
-                    try {
-                        return (
-                            <InputComponent
-                                id={componentId}
-                                value={value}
-                                onChange={onChange}
-                                readOnly={readOnly}
-                                position={position}
-                                definition={definition}
-                                {...(definition.ui as any)}
-                            />
-                        );
-                    } catch (error) {
-                        console.warn(
-                            `Failed to load UI component ${uiComponent}, falling back to type-based input`,
-                        );
-                    }
-                }
-            }
-        }
-    }
-
-    // Handle list fields with array wrapper
-    if (isList) {
-        return (
-            <ConfigurableOperationListInput
-                definition={definition}
-                value={value}
-                onChange={onChange}
-                readOnly={readOnly}
-            />
-        );
-    }
-
-    // Fall back to type-based rendering
-    switch (argType) {
-        case 'boolean':
-            return <BooleanInput value={value} onChange={onChange} readOnly={readOnly} />;
-
-        case 'int':
-        case 'float':
-            return (
-                <NumberInput definition={definition} value={value} onChange={onChange} readOnly={readOnly} />
-            );
-
-        case 'datetime':
-            return <DateTimeInput value={value} onChange={onChange} disabled={readOnly} />;
-
-        case 'ID':
-            // ID fields typically need specialized selectors
-            return (
-                <Input
-                    type="text"
-                    value={value || ''}
-                    onChange={e => onChange(e.target.value)}
-                    disabled={readOnly}
-                    placeholder="Enter ID..."
-                    className="bg-background"
-                />
-            );
-
-        case 'string':
-        default:
-            return (
-                <Input
-                    type="text"
-                    value={value || ''}
-                    onChange={e => onChange(e.target.value)}
-                    disabled={readOnly}
-                    className="bg-background"
-                />
-            );
-    }
-}
-
-/**
- * Boolean input component
- */
-function BooleanInput({
-    value,
-    onChange,
-    readOnly,
-}: Readonly<{
-    value: string;
-    onChange: (value: string) => void;
-    readOnly?: boolean;
-}>) {
-    const boolValue = value === 'true';
-
-    return (
-        <Switch
-            checked={boolValue}
-            onCheckedChange={checked => onChange(checked.toString())}
-            disabled={readOnly}
-        />
-    );
-}
-
-/**
- * Number input component with support for UI configuration
- */
-function NumberInput({
-    definition,
-    value,
-    onChange,
-    readOnly,
-}: Readonly<{
-    definition: ConfigurableOperationDefFragment['args'][number];
-    value: string;
-    onChange: (value: string) => void;
-    readOnly?: boolean;
-}>) {
-    const ui = definition.ui as any;
-    const isFloat = (definition.type as ConfigArgType) === 'float';
-    const min = ui?.min;
-    const max = ui?.max;
-    const step = ui?.step || (isFloat ? 0.01 : 1);
-    const prefix = ui?.prefix;
-    const suffix = ui?.suffix;
-
-    const numericValue = value ? parseFloat(value) : '';
-
-    return (
-        <AffixedInput
-            type="number"
-            value={numericValue}
-            onChange={e => {
-                const val = e.target.valueAsNumber;
-                onChange(isNaN(val) ? '' : val.toString());
-            }}
-            disabled={readOnly}
-            min={min}
-            max={max}
-            step={step}
-            prefix={prefix}
-            suffix={suffix}
-            className="bg-background"
-        />
-    );
-}
-
-/**
- * Currency input component
- */
-function CurrencyInput({
-    definition,
-    value,
-    onChange,
-    readOnly,
-}: Readonly<{
-    definition: ConfigurableOperationDefFragment['args'][number];
-    value: string;
-    onChange: (value: string) => void;
-    readOnly?: boolean;
-}>) {
-    const numericValue = value ? parseInt(value, 10) : '';
-
+    const universalFieldDef = configArgToUniversal(definition);
     return (
-        <AffixedInput
-            type="number"
-            value={numericValue}
-            onChange={e => {
-                const val = e.target.valueAsNumber;
-                onChange(isNaN(val) ? '0' : val.toString());
+        <UniversalFormInput
+            fieldDef={universalFieldDef}
+            field={{
+                value,
+                onChange,
+                onBlur: () => {},
+                name: definition.name,
+                ref: () => {},
             }}
+            valueMode="json-string"
             disabled={readOnly}
-            min={0}
-            step={1}
-            prefix="$"
-            className="bg-background"
-        />
-    );
-}
-
-/**
- * Select input component with options
- */
-function SelectInput({
-    definition,
-    value,
-    onChange,
-    readOnly,
-}: Readonly<{
-    definition: ConfigurableOperationDefFragment['args'][number];
-    value: string;
-    onChange: (value: string) => void;
-    readOnly?: boolean;
-}>) {
-    const ui = definition.ui as any;
-    const options = ui?.options || [];
-
-    return (
-        <Select value={value} onValueChange={onChange} disabled={readOnly}>
-            <SelectTrigger className="bg-background mb-0">
-                <SelectValue placeholder="Select an option..." />
-            </SelectTrigger>
-            <SelectContent>
-                {options.map((option: any) => (
-                    <SelectItem key={option.value} value={option.value}>
-                        {typeof option.label === 'string'
-                            ? option.label
-                            : option.label?.[0]?.value || option.value}
-                    </SelectItem>
-                ))}
-            </SelectContent>
-        </Select>
-    );
-}
-
-/**
- * Textarea input component
- */
-function TextareaInput({
-    definition,
-    value,
-    onChange,
-    readOnly,
-}: Readonly<{
-    definition: ConfigurableOperationDefFragment['args'][number];
-    value: string;
-    onChange: (value: string) => void;
-    readOnly?: boolean;
-}>) {
-    const ui = definition.ui as any;
-    const spellcheck = ui?.spellcheck ?? true;
-
-    return (
-        <Textarea
-            value={value || ''}
-            onChange={e => onChange(e.target.value)}
-            disabled={readOnly}
-            spellCheck={spellcheck}
-            placeholder="Enter text..."
-            rows={4}
-            className="bg-background"
+            position={position}
         />
     );
 }