feat: update VariableFilters to use CardItem and enhance form handling

packages/core/client/src/schema-component/antd/variable/VariableFilters.tsx

@@ -122,14 +122,20 @@ export function Filter({ config, filter, filterId, previousFilters }) {
       },
     };
   };
+  const argsMap = config.uiSchema
+    ? Object.fromEntries(config.uiSchema.map((param, index) => [param.name, filter.args[index]]))
+    : {};
 
   const useFormBlockProps = () => {
-    return { form, layout: 'vertical' };
+    return { form: createForm({ initialValues: argsMap }), layout: 'vertical' };
   };
 
-  const WithPropOver = ({ children }) => {
-    const { value } = useVariable();
   const schema = {
+    'x-uid': uid(),
+    type: 'void',
+    'x-component': 'CardItem',
+    properties: {
+      form: {
         'x-uid': uid(),
         type: 'void',
         'x-component': 'FormV2',
@@ -186,20 +192,22 @@ export function Filter({ config, filter, filterId, previousFilters }) {
             },
           },
         },
+      },
+    },
   };
-    return (
+  const Content = (
-      <Popover
-        open={open}
-        onOpenChange={handleOpenChange}
-        content={
     <SchemaComponent
       schema={schema}
       scope={{ useSaveActionProps, useFormBlockProps, useDeleteActionProps, outputValue, inputValue }}
       basePath={['']}
     />
-        }
+  );
-        trigger={'hover'}
+
-      >
+  const WithPropOver = ({ children }) => {
+    const { value } = useVariable();
+
+    return (
+      <Popover open={open} onOpenChange={handleOpenChange} content={Content} trigger={'click'}>
         {children}
       </Popover>
     );