✨🚧Implemented BooleanField

cfdraw/.web/src/plugins/components/Fields/BooleanField.tsx

@@ -0,0 +1,25 @@
+import { observer } from "mobx-react-lite";
+
+import type { IField } from "@/schema/plugins";
+import type { IBooleanField } from "@/schema/fields";
+import { titleCaseWord } from "@/utils/misc";
+import { getMetaField, setMetaField } from "@/stores/meta";
+import CFSwitch from "@/components/CFSwitch";
+import { useDefaultFieldValue } from "./utils";
+
+export interface BooleanFieldProps extends IField<IBooleanField> {}
+function BooleanField({ field, definition }: BooleanFieldProps) {
+  useDefaultFieldValue({ field, definition });
+
+  return (
+    <CFSwitch
+      label={definition.label ?? titleCaseWord(field)}
+      value={getMetaField(field)}
+      setValue={(value) => setMetaField(field, value)}
+      tooltip={definition.tooltip}
+      {...definition.props}
+    />
+  );
+}
+
+export default observer(BooleanField);

cfdraw/.web/src/plugins/components/Fields/index.tsx

@@ -7,6 +7,7 @@ import type { IDefinitions } from "@/schema/fields";
 import TextField from "./TextField";
 import NumberField from "./NumberField";
 import SelectField from "./SelectField";
+import BooleanField from "./BooleanField";
 
 interface IUseDefinitions extends FlexProps {
   definitions: IDefinitions;
@@ -32,6 +33,8 @@ export function useDefinitions({ definitions, numColumns, rowGap, ...others }: I
       Field = NumberField;
     } else if (definition.type === "select") {
       Field = SelectField;
+    } else if (definition.type === "boolean") {
+      Field = BooleanField;
     }
     if (!Field) return;
     const props = definition.props ?? {};