feat: add checkbox list

web/app/components/base/form/components/base/base-field.tsx

@@ -1,3 +1,4 @@
+import CheckboxList from '@/app/components/base/checkbox-list'
 import type { FormSchema } from '@/app/components/base/form/types'
 import { FormTypeEnum } from '@/app/components/base/form/types'
 import Input from '@/app/components/base/input'
@@ -5,6 +6,7 @@ import Radio from '@/app/components/base/radio'
 import RadioE from '@/app/components/base/radio/ui'
 import { PortalSelect } from '@/app/components/base/select'
 import PureSelect from '@/app/components/base/select/pure'
+import Tooltip from '@/app/components/base/tooltip'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { useTriggerPluginDynamicOptions } from '@/service/use-triggers'
 import cn from '@/utils/classnames'
@@ -52,6 +54,7 @@ const BaseField = ({
 }: BaseFieldProps) => {
   const renderI18nObject = useRenderI18nObject()
   const {
+    name,
     label,
     required,
     placeholder,
@@ -60,6 +63,8 @@ const BaseField = ({
     disabled: formSchemaDisabled,
     type: formItemType,
     dynamicSelectParams,
+    multiple = false,
+    tooltip,
   } = formSchema
   const disabled = propsDisabled || formSchemaDisabled
 
@@ -150,6 +155,12 @@ const BaseField = ({
             <span className='ml-1 text-text-destructive-secondary'>*</span>
           )
         }
+        {tooltip && (
+          <Tooltip
+            popupContent={<div className='w-[200px]'>{typeof tooltip === 'string' ? tooltip : renderI18nObject(tooltip as Record<string, string>)}</div>}
+            triggerClassName='ml-0.5 w-4 h-4'
+          />
+        )}
       </div>
       <div className={cn(inputContainerClassName)}>
         {
@@ -170,7 +181,7 @@ const BaseField = ({
           )
         }
         {
-          formItemType === FormTypeEnum.select && (
+          formItemType === FormTypeEnum.select && !multiple && (
             <PureSelect
               value={value}
               onChange={v => handleChange(v)}
@@ -184,6 +195,17 @@ const BaseField = ({
             />
           )
         }
+        {
+          formItemType === FormTypeEnum.select && multiple && (
+            <CheckboxList
+              title={name}
+              value={value}
+              onChange={v => field.handleChange(v)}
+              options={memorizedOptions}
+              maxHeight='200px'
+            />
+          )
+        }
         {
           formItemType === FormTypeEnum.dynamicSelect && (
             <PortalSelect

web/app/components/base/form/hooks/use-get-form-values.ts

@@ -12,7 +12,7 @@ export const useGetFormValues = (form: AnyFormApi, formSchemas: FormSchema[]) =>
 
   const getFormValues = useCallback((
     {
-      needCheckValidatedValues,
+      needCheckValidatedValues = true,
       needTransformWhenSecretFieldIsPristine,
     }: GetValuesOptions,
   ) => {
@@ -20,7 +20,7 @@ export const useGetFormValues = (form: AnyFormApi, formSchemas: FormSchema[]) =>
     if (!needCheckValidatedValues) {
       return {
         values,
-        isCheckValidated: false,
+        isCheckValidated: true,
       }
     }
 

web/app/components/base/form/types.ts

@@ -50,6 +50,7 @@ export type FormSchema = {
   name: string
   label: string | ReactNode | TypeWithI18N | Record<Locale, string>
   required: boolean
+  multiple?: boolean
   default?: any
   tooltip?: string | TypeWithI18N | Record<Locale, string>
   show_on?: FormShowOnObject[]