@vendure/dashboard 3.4.1-master-202508210231 → 3.4.1

package/src/lib/components/data-input/default-relation-input.tsx

@@ -5,6 +5,9 @@ import { ControllerRenderProps } from 'react-hook-form';
 import { MultiRelationInput, SingleRelationInput } from './relation-input.js';
 import { createRelationSelectorConfig } from './relation-selector.js';
 
+import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isRelationCustomFieldConfig } from '@/vdb/framework/form-engine/utils.js';
+
 interface PlaceholderIconProps {
     letter: string;
     className?: string;
@@ -551,8 +554,19 @@ interface DefaultRelationInputProps {
     disabled?: boolean;
 }
 
-export function DefaultRelationInput({ fieldDef, field, disabled }: Readonly<DefaultRelationInputProps>) {
+export function DefaultRelationInput({
+    fieldDef,
+    value,
+    onChange,
+    onBlur,
+    name,
+    ref,
+    disabled,
+}: Readonly<DashboardFormComponentProps>) {
     const { i18n } = useLingui();
+    if (!fieldDef || !isRelationCustomFieldConfig(fieldDef)) {
+        return null;
+    }
     const entityName = fieldDef.entity;
     const ENTITY_CONFIGS = createEntityConfigs(i18n);
     const config = ENTITY_CONFIGS[entityName as keyof typeof ENTITY_CONFIGS];
@@ -562,10 +576,10 @@ export function DefaultRelationInput({ fieldDef, field, disabled }: Readonly<Def
         console.warn(`No relation selector config found for entity: ${entityName}`);
         return (
             <input
-                value={field.value ?? ''}
-                onChange={e => field.onChange(e.target.value)}
-                onBlur={field.onBlur}
-                name={field.name}
+                value={value ?? ''}
+                onChange={e => onChange(e.target.value)}
+                onBlur={onBlur}
+                name={name}
                 disabled={disabled}
                 placeholder={`Enter ${entityName} ID`}
                 className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
@@ -578,8 +592,11 @@ export function DefaultRelationInput({ fieldDef, field, disabled }: Readonly<Def
     if (isList) {
         return (
             <MultiRelationInput
-                value={field.value ?? []}
-                onChange={field.onChange}
+                onBlur={onBlur}
+                name={name}
+                ref={ref}
+                value={value ?? []}
+                onChange={onChange}
                 config={config}
                 disabled={disabled}
                 selectorLabel={<Trans>Select {entityName.toLowerCase()}s</Trans>}
@@ -588,8 +605,11 @@ export function DefaultRelationInput({ fieldDef, field, disabled }: Readonly<Def
     } else {
         return (
             <SingleRelationInput
-                value={field.value ?? ''}
-                onChange={field.onChange}
+                onBlur={onBlur}
+                name={name}
+                ref={ref}
+                value={value ?? ''}
+                onChange={onChange}
                 config={config}
                 disabled={disabled}
                 selectorLabel={<Trans>Select {entityName.toLowerCase()}</Trans>}

package/src/lib/components/data-input/facet-value-input.tsx

@@ -1,3 +1,4 @@
+import { DashboardFormComponent } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
 import { useQuery } from '@tanstack/react-query';
@@ -21,14 +22,8 @@ const facetValuesDocument = graphql(`
     }
 `);
 
-export interface FacetValueInputProps {
-    value: string;
-    onChange: (value: string) => void;
-    readOnly?: boolean;
-}
-
-export function FacetValueInput(props: FacetValueInputProps) {
-    const ids = decodeIds(props.value);
+export const FacetValueInput: DashboardFormComponent = ({ value, onChange, disabled }) => {
+    const ids = decodeIds(value);
     const { data } = useQuery({
         queryKey: ['facetValues', ids],
         queryFn: () =>
@@ -43,12 +38,12 @@ export function FacetValueInput(props: FacetValueInputProps) {
 
     const onValueSelectHandler = (value: FacetValue) => {
         const newIds = new Set([...ids, value.id]);
-        props.onChange(JSON.stringify(Array.from(newIds)));
+        onChange(JSON.stringify(Array.from(newIds)));
     };
 
     const onValueRemoveHandler = (id: string) => {
         const newIds = new Set(ids.filter(existingId => existingId !== id));
-        props.onChange(JSON.stringify(Array.from(newIds)));
+        onChange(JSON.stringify(Array.from(newIds)));
     };
 
     return (
@@ -62,12 +57,19 @@ export function FacetValueInput(props: FacetValueInputProps) {
                     />
                 ))}
             </div>
-            <FacetValueSelector onValueSelect={onValueSelectHandler} disabled={props.readOnly} />
+            <FacetValueSelector onValueSelect={onValueSelectHandler} disabled={disabled} />
         </div>
     );
-}
+};
 
-function decodeIds(idsString: string): string[] {
+FacetValueInput.metadata = {
+    isListInput: true,
+};
+
+function decodeIds(idsString: string | string[]): string[] {
+    if (Array.isArray(idsString)) {
+        return idsString;
+    }
     try {
         return JSON.parse(idsString);
     } catch (error) {

package/src/lib/components/data-input/index.ts

@@ -9,8 +9,8 @@ export * from './select-with-options.js';
 
 // Enhanced configurable operation input components
 export * from './configurable-operation-list-input.js';
-export * from './customer-group-selector-input.js';
-export * from './product-selector-input.js';
+export * from './customer-group-input.js';
+export * from './product-multi-selector-input.js';
 
 // Relation selector components
 export * from './relation-input.js';

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

@@ -1,11 +1,21 @@
-import { DataInputComponentProps } from '@/vdb/framework/component-registry/component-registry.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { useEffect, useMemo, useState } from 'react';
 import { AffixedInput } from './affixed-input.js';
 
-// Original component
-function MoneyInputInternal({ value, currency, onChange }: DataInputComponentProps) {
+import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+
+export interface MoneyInputProps extends DashboardFormComponentProps {
+    currency?: string;
+}
+
+export function MoneyInput(props: Readonly<MoneyInputProps>) {
+    const { value, onChange, currency, ...rest } = props;
+    const { activeChannel } = useChannel();
+    const activeCurrency = currency ?? activeChannel?.defaultCurrencyCode;
+    const readOnly = isReadonlyField(props.fieldDef);
     const {
         settings: { displayLanguage, displayLocale },
     } = useUserSettings();
@@ -19,39 +29,43 @@ function MoneyInputInternal({ value, currency, onChange }: DataInputComponentPro
 
     // Determine if the currency symbol should be a prefix based on locale
     const shouldPrefix = useMemo(() => {
-        if (!currency) return false;
+        if (!activeCurrency) {
+            return false;
+        }
         const locale = displayLocale || displayLanguage.replace(/_/g, '-');
         const parts = new Intl.NumberFormat(locale, {
             style: 'currency',
-            currency,
+            currency: activeCurrency,
             currencyDisplay: 'symbol',
         }).formatToParts();
         const NaNString = parts.find(p => p.type === 'nan')?.value ?? 'NaN';
         const localised = new Intl.NumberFormat(locale, {
             style: 'currency',
-            currency,
+            currency: activeCurrency,
             currencyDisplay: 'symbol',
         }).format(undefined as any);
         return localised.indexOf(NaNString) > 0;
-    }, [currency, displayLocale, displayLanguage]);
+    }, [activeCurrency, displayLocale, displayLanguage]);
 
     // Get the currency symbol
     const currencySymbol = useMemo(() => {
-        if (!currency) return '';
+        if (!activeCurrency) return '';
         const locale = displayLocale || displayLanguage.replace(/_/g, '-');
         const parts = new Intl.NumberFormat(locale, {
             style: 'currency',
-            currency,
+            currency: activeCurrency,
             currencyDisplay: 'symbol',
         }).formatToParts();
-        return parts.find(p => p.type === 'currency')?.value ?? currency;
-    }, [currency, displayLocale, displayLanguage]);
+        return parts.find(p => p.type === 'currency')?.value ?? activeCurrency;
+    }, [activeCurrency, displayLocale, displayLanguage]);
 
     return (
         <AffixedInput
             type="text"
             className="bg-background"
             value={displayValue}
+            disabled={readOnly}
+            {...rest}
             onChange={e => {
                 const inputValue = e.target.value;
                 // Allow empty input
@@ -77,8 +91,8 @@ function MoneyInputInternal({ value, currency, onChange }: DataInputComponentPro
                     }
                 }
             }}
-            onBlur={e => {
-                const inputValue = e.target.value;
+            onBlur={() => {
+                const inputValue = displayValue;
                 if (inputValue === '') {
                     onChange(0);
                     setDisplayValue('0');
@@ -97,10 +111,3 @@ function MoneyInputInternal({ value, currency, onChange }: DataInputComponentPro
         />
     );
 }
-
-// Wrapper that makes it compatible with DataInputComponent
-export function MoneyInput(props: { value: any; onChange: (value: any) => void; [key: string]: any }) {
-    const { value, onChange, ...rest } = props;
-    const currency = rest.currency || 'USD'; // Default currency if none provided
-    return <MoneyInputInternal value={value} currency={currency} onChange={onChange} />;
-}

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

@@ -0,0 +1,48 @@
+import { AffixedInput } from '@/vdb/components/data-input/affixed-input.js';
+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';
+
+export function NumberInput({ fieldDef, onChange, ...fieldProps }: Readonly<DashboardFormComponentProps>) {
+    const readOnly = fieldProps.disabled || isReadonlyField(fieldDef);
+    const isFloat = fieldDef ? fieldDef.type === 'float' : false;
+    const min = fieldDef?.ui?.min;
+    const max = fieldDef?.ui?.max;
+    const step = fieldDef?.ui?.step || (isFloat ? 0.01 : 1);
+    const prefix = fieldDef?.ui?.prefix;
+    const suffix = fieldDef?.ui?.suffix;
+    const shouldUseAffixedInput = prefix || suffix;
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (readOnly) return;
+        onChange(e.target.valueAsNumber);
+    };
+    if (shouldUseAffixedInput) {
+        return (
+            <AffixedInput
+                {...fieldProps}
+                type="number"
+                onChange={handleChange}
+                min={min}
+                max={max}
+                step={step}
+                prefix={prefix}
+                suffix={suffix}
+                className="bg-background"
+                disabled={readOnly}
+            />
+        );
+    }
+
+    return (
+        <Input
+            type="number"
+            onChange={handleChange}
+            {...fieldProps}
+            min={min}
+            max={max}
+            step={step}
+            disabled={readOnly}
+        />
+    );
+}

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

@@ -0,0 +1,16 @@
+import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
+import { Input } from '../ui/input.js';
+
+export function PasswordInput(props: Readonly<DashboardFormComponentProps>) {
+    const readOnly = props.disabled || isReadonlyField(props.fieldDef);
+    return (
+        <Input
+            type="password"
+            ref={props.ref}
+            value={props.value}
+            onChange={e => props.onChange(e.target.value)}
+            disabled={readOnly}
+        />
+    );
+}

package/src/lib/components/data-input/{product-multi-selector.tsx → product-multi-selector-input.tsx}

@@ -10,7 +10,7 @@ import {
     DialogTitle,
 } from '@/vdb/components/ui/dialog.js';
 import { Input } from '@/vdb/components/ui/input.js';
-import { DataInputComponent } from '@/vdb/framework/component-registry/component-registry.js';
+import { DashboardFormComponent } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
 import { Trans } from '@/vdb/lib/trans.js';
@@ -372,21 +372,12 @@ function ProductMultiSelectorDialog({
     );
 }
 
-export const ProductMultiInput: DataInputComponent = ({ value, onChange, ...props }) => {
+export const ProductMultiInput: DashboardFormComponent = ({ value, onChange, ...props }) => {
     const [open, setOpen] = useState(false);
-
     // Parse the configuration from the field definition
-    const mode = (props as any)?.selectionMode === 'variant' ? 'variant' : 'product';
-
+    const mode = props.fieldDef?.ui?.selectionMode === 'variant' ? 'variant' : 'product';
     // Parse the current value (JSON array of IDs)
-    const selectedIds = useMemo(() => {
-        if (!value || typeof value !== 'string') return [];
-        try {
-            return JSON.parse(value);
-        } catch {
-            return [];
-        }
-    }, [value]);
+    const selectedIds = value;
 
     const handleSelectionChange = useCallback(
         (newSelectedIds: string[]) => {
@@ -394,11 +385,9 @@ export const ProductMultiInput: DataInputComponent = ({ value, onChange, ...prop
         },
         [onChange],
     );
-
     const itemType = mode === 'product' ? 'products' : 'variants';
     const buttonText =
         selectedIds.length > 0 ? `Selected ${selectedIds.length} ${itemType}` : `Select ${itemType}`;
-
     return (
         <>
             <div className="space-y-2">
@@ -424,3 +413,7 @@ export const ProductMultiInput: DataInputComponent = ({ value, onChange, ...prop
         </>
     );
 };
+
+ProductMultiInput.metadata = {
+    isListInput: true,
+};

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

@@ -1,12 +1,11 @@
+import { DashboardFormComponent, DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
 import { createRelationSelectorConfig, RelationSelector } from './relation-selector.js';
 
 /**
  * Single relation input component
  */
-export interface SingleRelationInputProps<T = any> {
-    value: string;
-    onChange: (value: string) => void;
+export interface SingleRelationInputProps<T = any> extends DashboardFormComponentProps {
     config: Parameters<typeof createRelationSelectorConfig<T>>[0];
     disabled?: boolean;
     className?: string;
@@ -46,9 +45,7 @@ export function SingleRelationInput<T>({
 /**
  * Multi relation input component
  */
-export interface MultiRelationInputProps<T = any> {
-    value: string[];
-    onChange: (value: string[]) => void;
+export interface MultiRelationInputProps<T = any> extends DashboardFormComponentProps {
     config: Parameters<typeof createRelationSelectorConfig<T>>[0];
     disabled?: boolean;
     className?: string;
@@ -80,6 +77,10 @@ export function MultiRelationInput<T>({
     );
 }
 
+(MultiRelationInput as DashboardFormComponent).metadata = {
+    isListInput: true,
+};
+
 // Example configurations for common entities
 
 /**

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

@@ -1,9 +1,11 @@
+import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
 import TextStyle from '@tiptap/extension-text-style';
 import { BubbleMenu, Editor, EditorContent, useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import { BoldIcon, ItalicIcon, StrikethroughIcon } from 'lucide-react';
 import { useLayoutEffect, useRef } from 'react';
 import { Button } from '../ui/button.js';
+import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
 
 // define your extension array
 const extensions = [
@@ -20,13 +22,8 @@ const extensions = [
     }),
 ];
 
-export interface RichTextInputProps {
-    value: string;
-    disabled?: boolean;
-    onChange: (value: string) => void;
-}
-
-export function RichTextInput({ value, onChange, disabled }: Readonly<RichTextInputProps>) {
+export function RichTextInput({ value, onChange, fieldDef }: Readonly<DashboardFormComponentProps>) {
+    const readOnly = isReadonlyField(fieldDef);
     const isInternalUpdate = useRef(false);
 
     const editor = useEditor({
@@ -35,16 +32,16 @@ export function RichTextInput({ value, onChange, disabled }: Readonly<RichTextIn
         },
         extensions: extensions,
         content: value,
-        editable: !disabled,
+        editable: !readOnly,    
         onUpdate: ({ editor }) => {
-            if (!disabled) {
+            if (!readOnly) {
                 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 ${disabled ? 'cursor-not-allowed opacity-50' : ''}`,
+                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 ${readOnly ? 'cursor-not-allowed opacity-50' : ''}`,
             },
         },
     });
@@ -64,9 +61,9 @@ export function RichTextInput({ value, onChange, disabled }: Readonly<RichTextIn
     // Update editor's editable state when disabled prop changes
     useLayoutEffect(() => {
         if (editor) {
-            editor.setEditable(!disabled);
+            editor.setEditable(!readOnly);
         }
-    }, [disabled, editor]);
+    }, [readOnly, editor]);
 
     if (!editor) {
         return null;
@@ -75,7 +72,7 @@ export function RichTextInput({ value, onChange, disabled }: Readonly<RichTextIn
     return (
         <>
             <EditorContent editor={editor} />
-            <CustomBubbleMenu editor={editor} disabled={disabled} />
+            <CustomBubbleMenu editor={editor} disabled={readOnly} />
         </>
     );
 }

package/src/lib/components/data-input/select-with-options.tsx

@@ -1,15 +1,16 @@
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import {
+    DashboardFormComponent,
+    DashboardFormComponentProps,
+    StringCustomFieldConfig,
+} from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isReadonlyField, isStringFieldWithOptions } from '@/vdb/framework/form-engine/utils.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { Trans } from '@/vdb/lib/trans.js';
-import { StringFieldOption } from '@vendure/common/lib/generated-types';
 import React from 'react';
-import { ControllerRenderProps } from 'react-hook-form';
 import { MultiSelect } from '../shared/multi-select.js';
 
-export interface SelectWithOptionsProps {
-    field: ControllerRenderProps<any, any>;
-    options: StringFieldOption[];
-    disabled?: boolean;
+export interface SelectWithOptionsProps extends DashboardFormComponentProps {
     placeholder?: React.ReactNode;
     isListField?: boolean;
 }
@@ -22,12 +23,14 @@ export interface SelectWithOptionsProps {
  * @since 3.3.0
  */
 export function SelectWithOptions({
-    field,
-    options,
-    disabled,
+    value,
+    onChange,
+    fieldDef,
     placeholder,
     isListField = false,
+    disabled,
 }: Readonly<SelectWithOptionsProps>) {
+    const readOnly = disabled || isReadonlyField(fieldDef);
     const {
         settings: { displayLanguage },
     } = useUserSettings();
@@ -37,6 +40,11 @@ export function SelectWithOptions({
         const translation = label.find(t => t.languageCode === displayLanguage);
         return translation?.value ?? label[0]?.value ?? '';
     };
+    if (!fieldDef || !isStringFieldWithOptions(fieldDef)) {
+        return null;
+    }
+    const options: NonNullable<StringCustomFieldConfig['options']> =
+        fieldDef.options ?? fieldDef.ui.options ?? [];
 
     // Convert options to MultiSelect format
     const multiSelectItems = options.map(option => ({
@@ -45,31 +53,31 @@ export function SelectWithOptions({
     }));
 
     // For list fields, use MultiSelect component
-    if (isListField) {
+    if (isListField || fieldDef?.list === true) {
         return (
             <MultiSelect
                 multiple={true}
-                value={field.value || []}
-                onChange={field.onChange}
+                value={value || []}
+                onChange={onChange}
                 items={multiSelectItems}
                 placeholder={placeholder ? String(placeholder) : 'Select options'}
-                className={disabled ? 'opacity-50 pointer-events-none' : ''}
+                className={readOnly ? 'opacity-50 pointer-events-none' : ''}
             />
         );
     }
 
     // For single fields, use regular Select
-    const currentValue = field.value ?? '';
+    const currentValue = value ?? '';
 
     const handleValueChange = (value: string) => {
         if (value) {
-            field.onChange(value);
+            onChange(value);
         }
     };
 
     return (
-        <Select value={currentValue ?? undefined} onValueChange={handleValueChange} disabled={disabled}>
-            <SelectTrigger>
+        <Select value={currentValue ?? undefined} onValueChange={handleValueChange} disabled={readOnly}>
+            <SelectTrigger className="mb-0">
                 <SelectValue placeholder={placeholder || <Trans>Select an option</Trans>} />
             </SelectTrigger>
             <SelectContent>
@@ -82,3 +90,7 @@ export function SelectWithOptions({
         </Select>
     );
 }
+
+(SelectWithOptions as DashboardFormComponent).metadata = {
+    isListInput: 'dynamic',
+};