dtoro/zui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styles

Browse Source
This commit is contained in:
authentik Default Admin
2026-03-07 23:13:07 +01:00
parent 4c33d1095d
commit 640c8b7d98
6 changed files with 41 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/graph/VariableNode.tsx
View File

@@ -94,46 +94,47 @@ export const VariableNode = memo(function VariableNode({ id, data }: Props) {
<BaseNode className="min-w-56 min-h-[180px]" handles={<OutputHandle id="out" />}>
<BaseNodeHeaderRow icon={<Variable className="size-4" />} title={<NodeHeaderTitle nodeId={id} displayTitle={id} />} />
<BaseNodeContent className="gap-2 p-3">
<BaseNodeContent>
<div className="shrink-0 w-full">
<NodeMenubar nodeId={id} nodeType="variable" />
</div>
<div className="flex flex-col gap-1.5">
<label className="text-xs font-medium text-muted-foreground">Type</label>
<Select value={valueType} onValueChange={onTypeChange}>
<SelectTrigger>
<SelectValue placeholder="Type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="string">String</SelectItem>
<SelectItem value="number">Number</SelectItem>
<SelectItem value="boolean">Boolean</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex flex-col gap-1.5">
<label className="text-xs font-medium text-muted-foreground">Value</label>
{valueType === 'boolean' ? (
<div className="flex items-center gap-2 text-sm">
<Switch
checked={value === true}
onCheckedChange={onBooleanChange}
<div className="flex flex-col p-2 gap-2">
<div className="flex flex-col gap-1.5">
<label className="text-xs font-medium text-muted-foreground">Type</label>
<Select value={valueType} onValueChange={onTypeChange}>
<SelectTrigger>
<SelectValue placeholder="Type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="string">String</SelectItem>
<SelectItem value="number">Number</SelectItem>
<SelectItem value="boolean">Boolean</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex flex-col gap-1.5">
<label className="text-xs font-medium text-muted-foreground">Value</label>
{valueType === 'boolean' ? (
<div className="flex items-center gap-2 text-sm">
<Switch
checked={value === true}
onCheckedChange={onBooleanChange}
/>
<span className="text-muted-foreground">{value ? 'true' : 'false'}</span>
</div>
) : (
<Input
type={valueType === 'number' ? 'number' : 'text'}
value={valueType === 'number' ? (value as number) : displayValue}
onChange={onValueChange}
/>
<span className="text-muted-foreground">{value ? 'true' : 'false'}</span>
</div>
) : (
<Input
type={valueType === 'number' ? 'number' : 'text'}
value={valueType === 'number' ? (value as number) : displayValue}
onChange={onValueChange}
/>
)}
)}
</div>
</div>
</BaseNodeContent>
<BaseNodeFooter>
<BaseNodeFooterText>
Use in config: <code className="rounded bg-muted px-0.5">prop: {'${'}{id}{'}'}</code>
</BaseNodeFooterText>
</BaseNodeFooter>
</BaseNode>