Skip to content

Commit 5e724b5

Browse files
idusparaiduspara
committed
fix: Fixed card selection
1 parent a3b5b4f commit 5e724b5

3 files changed

Lines changed: 49 additions & 17 deletions

File tree

‎src/components/form-builder/form-components/form-checkbox.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,10 @@ export function FormCheckbox(component: FormComponentModel, form: UseFormReturn<
1515
const asCardClasses = generateTWClassesForAllViewports(component, "asCard");
1616

1717
return (
18-
<div
18+
<FormLabel
1919
key={component.id}
20-
className={cn(asCardClasses, "flex items-start space-x-2")}
20+
className={cn(asCardClasses, "w-full flex items-start space-x-2 has-[[data-state=checked]]:border-primary")}
21+
htmlFor={component.getField("attributes.id")}
2122
>
2223
<Checkbox
2324
id={component.getField("attributes.id")}
@@ -27,14 +28,14 @@ export function FormCheckbox(component: FormComponentModel, form: UseFormReturn<
2728
onCheckedChange={field.onChange}
2829
/>
2930
<div className="grid gap-1.5 leading-none">
30-
<FormLabel htmlFor={component.getField("attributes.id")}>
31+
<FormLabel>
3132
{component.getField("label")}
3233
</FormLabel>
3334
<p className="text-sm text-muted-foreground">
3435
{component.getField("label_description")}
3536
</p>
3637
</div>
37-
</div>
38+
</FormLabel>
3839
);
3940
}
4041

@@ -47,20 +48,21 @@ export function getReactCode(component: FormComponentModel): ReactCode {
4748
const asCardClasses = generateTWClassesForAllViewports(component, "asCard");
4849
return {
4950
code: `
50-
<div
51+
<FormLabel
5152
key="${component.id}"
52-
className="${escapeHtml(cn(asCardClasses, "flex items-start space-x-2"))}"
53+
className="${escapeHtml(cn(asCardClasses, "w-full flex items-start space-x-2 has-[[data-state=checked]]:border-primary"))}"
54+
htmlFor="${escapeHtml(component.getField("attributes.id"))}"
5355
>
5456
<Checkbox id="${escapeHtml(component.getField("attributes.id"))}" className="${escapeHtml(component.getField("attributes.class"))}" {...field} checked={field.value} onCheckedChange={field.onChange} />
5557
<div className="grid gap-1.5 leading-none">
56-
<FormLabel htmlFor="${escapeHtml(component.getField("attributes.id"))}">
58+
<FormLabel>
5759
${escapeHtml(component.getField("label"))}
5860
</FormLabel>
5961
<p className="text-sm text-muted-foreground">
6062
${escapeHtml(component.getField("label_description"))}
6163
</p>
6264
</div>
63-
</div>
65+
</FormLabel>
6466
`,
6567
dependencies: {
6668
"@/components/ui/checkbox": ["Checkbox"],

‎src/components/form-builder/form-components/form-switch.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,20 +16,21 @@ export function FormSwitch(component: FormComponentModel, form: UseFormReturn<Fi
1616
const asCardClasses = generateTWClassesForAllViewports(component, "asCard");
1717

1818
return (
19-
<div
19+
<FormLabel
2020
key={component.id}
21-
className={cn(asCardClasses, "flex justify-between items-center space-x-2 w-full")}
21+
className={cn(asCardClasses, "flex justify-between items-center space-x-2 w-full has-[[data-state=checked]]:border-primary")}
22+
htmlFor={component.getField("attributes.id")}
2223
>
2324
<div className="grid gap-1.5 leading-none">
24-
<FormLabel htmlFor={component.getField("attributes.id")}>
25+
<FormLabel>
2526
{component.getField("label")}
2627
</FormLabel>
2728
<p className="text-sm text-muted-foreground">
2829
{component.getField("label_description")}
2930
</p>
3031
</div>
3132
<Switch id={component.getField("attributes.id")} {...field} checked={field.value} onCheckedChange={field.onChange} />
32-
</div>
33+
</FormLabel>
3334
);
3435
}
3536

@@ -42,20 +43,21 @@ export function getReactCode(component: FormComponentModel): ReactCode {
4243
const asCardClasses = generateTWClassesForAllViewports(component, "asCard");
4344
return {
4445
code: `
45-
<div
46+
<FormLabel
4647
key="${component.id}"
47-
className="${escapeHtml(cn(asCardClasses, "flex justify-between items-center space-x-2 w-full"))}"
48+
className="${escapeHtml(cn(asCardClasses, "w-full flex justify-between items-center space-x-2 has-[[data-state=checked]]:border-primary"))}"
49+
htmlFor="${escapeHtml(component.getField("attributes.id"))}"
4850
>
4951
<div className="grid gap-1.5 leading-none">
50-
<FormLabel htmlFor="${escapeHtml(component.getField("attributes.id"))}">
52+
<FormLabel>
5153
${escapeHtml(component.getField("label"))}
5254
</FormLabel>
5355
<p className="text-sm text-muted-foreground">
5456
${escapeHtml(component.getField("label_description"))}
5557
</p>
5658
</div>
5759
<Switch id="${escapeHtml(component.getField("attributes.id"))}" {...field} checked={field.value} onCheckedChange={field.onChange} />
58-
</div>
60+
</FormLabel>
5961
`,
6062
dependencies: {
6163
"@/components/ui/switch": ["Switch"],
@@ -69,7 +71,7 @@ export const SwitchDesignProperties: DesignPropertiesViews = {
6971
base: null,
7072
grid: <GridGroup />,
7173
html: <HtmlGroup />,
72-
label: <LabelGroup whitelist={["label", "label_description", "labelPosition"]} />,
74+
label: <LabelGroup whitelist={["label", "label_description"]} />,
7375
input: <InputGroup whitelist={["description", "asCard", "checked"]} />,
7476
options: null,
7577
button: null,

‎src/components/form-builder/sidebar/groups/dialogs/options-dialog.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
Save,
1818
SaveIcon,
1919
ListPlusIcon,
20+
CheckIcon,
2021
} from "lucide-react";
2122
import { useEffect, useState } from "react";
2223
import { FormComponentModelInput } from "@/types/FormComponent.types";
@@ -78,8 +79,35 @@ export function OptionsDialog({
7879
setOpen(false);
7980
};
8081

82+
useEffect(() => {
83+
if (!open) {
84+
setLoadedOptions(component.options);
85+
}
86+
}, [open, component.options]);
87+
8188
return (
8289
<Dialog open={open} onOpenChange={setOpen}>
90+
<div className="flex flex-col gap-2 relative">
91+
{component.options && component.options.length > 0 ? (
92+
<>
93+
<div className={cn("absolute inset-x-0 bottom-0 h-12 bg-gradient-from-transparent bg-gradient-to-t from-white to-transparent hidden", component.options.length > 4 && "block")} />
94+
<div className="grid grid-cols-2 gap-2 items-center text-sm text-gray-400">
95+
<span className="font-medium">Label</span>
96+
<span className="font-medium">Value</span>
97+
</div>
98+
</>
99+
) : (
100+
<div className="grid grid-cols-2 gap-2 items-center text-sm text-gray-400">
101+
<span className="font-medium">No options</span>
102+
</div>
103+
)}
104+
{component.options && component.options.map((option, index) => index < 5 && (
105+
<div key={index} className="grid grid-cols-2 gap-2 items-center">
106+
<span className="text-sm whitespace-nowrap overflow-hidden text-ellipsis">{option.label}</span>
107+
<span className="text-sm whitespace-nowrap overflow-hidden text-ellipsis">{option.value}</span>
108+
</div>
109+
))}
110+
</div>
83111
<DialogTrigger asChild>
84112
<Button variant="outline" size="sm" className="w-full">
85113
<ListPlusIcon className="mr-2 h-4 w-4" />

0 commit comments

Comments
 (0)