@vendure/dashboard 3.5.1-master-202511010232 → 3.5.1-master-202511040232

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.5.1-master-202511010232",
+    "version": "3.5.1-master-202511040232",
     "type": "module",
     "repository": {
         "type": "git",
@@ -154,8 +154,8 @@
         "@storybook/addon-vitest": "^10.0.0-beta.9",
         "@storybook/react-vite": "^10.0.0-beta.9",
         "@types/node": "^22.13.4",
-        "@vendure/common": "^3.5.1-master-202511010232",
-        "@vendure/core": "^3.5.1-master-202511010232",
+        "@vendure/common": "^3.5.1-master-202511040232",
+        "@vendure/core": "^3.5.1-master-202511040232",
         "@vitest/browser": "^3.2.4",
         "@vitest/coverage-v8": "^3.2.4",
         "eslint": "^9.19.0",
@@ -172,5 +172,5 @@
         "lightningcss-linux-arm64-musl": "^1.29.3",
         "lightningcss-linux-x64-musl": "^1.29.1"
     },
-    "gitHead": "63d101e2fc1291d9e4140384aa2e415c845b0951"
+    "gitHead": "fe1c9639d991ff7ebfb1188c4d9a62f1b7c74a04"
 }

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

@@ -18,3 +18,6 @@ export * from './relation-selector.js';
 
 // Slug input component
 export * from './slug-input.js';
+
+// String list input component
+export * from './string-list-input.js';

package/src/lib/components/data-input/string-list-input.tsx

@@ -0,0 +1,106 @@
+import { X } from 'lucide-react';
+import { KeyboardEvent, useId, useRef, useState } from 'react';
+
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import type { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { useLingui } from '@lingui/react';
+
+export function StringListInput({
+    value,
+    onChange,
+    onBlur,
+    disabled,
+    name,
+    fieldDef,
+}: DashboardFormComponentProps) {
+    const [inputValue, setInputValue] = useState('');
+    const inputRef = useRef<HTMLInputElement>(null);
+    const { i18n } = useLingui();
+    const isDisabled = isReadonlyField(fieldDef) || disabled;
+    const id = useId();
+
+    const items = Array.isArray(value) ? value : [];
+
+    const addItem = (item: string) => {
+        const trimmedItem = item.trim();
+        if (trimmedItem) {
+            onChange([...items, trimmedItem]);
+            setInputValue('');
+        }
+    };
+
+    const removeItem = (indexToRemove: number) => {
+        onChange(items.filter((_, index) => index !== indexToRemove));
+    };
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter' || e.key === ',') {
+            e.preventDefault();
+            addItem(inputValue);
+        } else if (e.key === 'Backspace' && !inputValue && items.length > 0) {
+            // Remove last item when backspace is pressed on empty input
+            removeItem(items.length - 1);
+        }
+    };
+
+    const handleInputBlur = () => {
+        // Add current input value as item on blur if there's any
+        if (inputValue.trim()) {
+            addItem(inputValue);
+        }
+        onBlur?.();
+    };
+
+    return (
+        <div
+            className={cn(
+                'flex min-h-10 w-full flex-wrap gap-2',
+                isDisabled && 'cursor-not-allowed opacity-50',
+            )}
+        >
+            {!isDisabled && (
+                <Input
+                    ref={inputRef}
+                    type="text"
+                    value={inputValue}
+                    onChange={e => setInputValue(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    onBlur={handleInputBlur}
+                    name={name}
+                    placeholder={i18n.t('Type and press Enter or comma to add...')}
+                    className="min-w-[120px]"
+                />
+            )}
+            <div className="flex flex-wrap gap-1 items-start justify-start">
+                {items.map((item, index) => (
+                    <Badge key={id + index} variant="secondary">
+                        <span>{item}</span>
+                        {!isDisabled && (
+                            <button
+                                type="button"
+                                onClick={e => {
+                                    e.stopPropagation();
+                                    removeItem(index);
+                                }}
+                                className={cn(
+                                    'ml-1 rounded-full outline-none ring-offset-background',
+                                    'hover:bg-muted focus:ring-2 focus:ring-ring focus:ring-offset-2',
+                                )}
+                                aria-label={`Remove ${item}`}
+                            >
+                                <X className="h-3 w-3" />
+                            </button>
+                        )}
+                    </Badge>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+StringListInput.metadata = {
+    isListInput: true,
+};

package/src/lib/framework/extension-api/logic/navigation.ts

@@ -26,6 +26,9 @@ export function registerNavigationExtensions(
                     id: route.navMenuItem.id ?? route.path,
                     title: route.navMenuItem.title ?? route.path,
                     order: route.navMenuItem.order,
+                    requiresPermission: route.navMenuItem.requiresPermission,
+                    icon: route.navMenuItem.icon,
+                    placement: route.navMenuItem.placement,
                 };
                 addNavMenuItem(item, route.navMenuItem.sectionId);
             }

package/src/lib/framework/form-engine/form-control-adapter.tsx

@@ -2,6 +2,7 @@ import { JSX, useMemo } from 'react';
 import { ControllerRenderProps } from 'react-hook-form';
 
 import { CustomFieldListInput } from '@/vdb/components/data-input/custom-field-list-input.js';
+import { StringListInput } from '@/vdb/components/data-input/string-list-input.js';
 import { StructFormInput } from '@/vdb/components/data-input/struct-form-input.js';
 import { ConfigurableOperationListInput } from '../../components/data-input/configurable-operation-list-input.js';
 
@@ -124,7 +125,7 @@ function renderListField(
     }
 
     if (fieldDef.type === 'string') {
-        return <DefaultInputForType {...fieldWithTransform} fieldDef={fieldDef} />;
+        return <StringListInput {...fieldWithTransform} fieldDef={fieldDef} />;
     }
 
     return (

package/src/lib/graphql/api.ts

@@ -60,7 +60,7 @@ const awesomeClient = new AwesomeGraphQLClient({
             credentials: 'include',
             mode: 'cors',
         }).then(res => {
-            const authToken = res.headers.get('vendure-auth-token');
+            const authToken = res.headers.get(uiConfig.api.authTokenHeaderKey);
             if (authToken) {
                 localStorage.setItem(LS_KEY_SESSION_TOKEN, authToken);
             }