表单

import { IconHelpCircle } from '@fibrous/semi-icons-solid';
import { Form, FormInput, FormSelect, Tooltip } from '@fibrous/semi-ui-solid';

export default function FormDemo() {
    return (
        <Form layout="horizontal" onValueChange={(values) => console.log(values)}>
            <FormInput field="UserName" label="用户名" style={{ width: '80px' }} />
            <FormInput
                field="Password"
                label={{
                    text: '密码',
                    extra: (
                        <Tooltip content="详情">
                            <IconHelpCircle aria-label="帮助" style={{ color: 'var(--semi-color-text-2)' }} />
                        </Tooltip>
                    ),
                }}
                style={{ width: '176px' }}
            />
            <FormSelect field="Role" label={{ text: '角色', optional: true }} style={{ width: '176px' }}>
                <FormSelect.Option value="admin">管理员</FormSelect.Option>
                <FormSelect.Option value="user">普通用户</FormSelect.Option>
                <FormSelect.Option value="guest">访客</FormSelect.Option>
            </FormSelect>
        </Form>
    );
}

import { Form, FormInput, FormSelect } from '@fibrous/semi-ui-solid';

export default function FormDemo() {
    return (
        <Form
            render={(form) => (
                <>
                    <FormSelect field="Role" label="角色" style={{ width: '176px' }}>
                        <FormSelect.Option value="admin">管理员</FormSelect.Option>
                        <FormSelect.Option value="user">普通用户</FormSelect.Option>
                        <FormSelect.Option value="guest">访客</FormSelect.Option>
                    </FormSelect>
                    <FormInput field="UserName" label="用户名" style={{ width: '80px' }} />
                    <FormInput field="Password" label="密码" style={{ width: '176px' }} />
                    <code style={{ 'margin-top': '24px' }}>{JSON.stringify(form.formState)}</code>
                </>
            )}
            layout="horizontal"
            onValueChange={(values) => console.log(values)}
        />
    );
}

import { Form, FormInput, FormSelect } from '@fibrous/semi-ui-solid';

export default function FormDemo() {
    return (
        <Form layout="horizontal" onValueChange={(values) => console.log(values)}>
            {(form) => (
                <>
                    <FormSelect field="Role" label="角色" style={{ width: '176px' }}>
                        <FormSelect.Option value="admin">管理员</FormSelect.Option>
                        <FormSelect.Option value="user">普通用户</FormSelect.Option>
                        <FormSelect.Option value="guest">访客</FormSelect.Option>
                    </FormSelect>
                    <FormInput field="UserName" label="用户名" style={{ width: '80px' }} />
                    <FormInput field="Password" label="密码" style={{ width: '176px' }} />
                    <code style={{ 'margin-top': '24px' }}>{JSON.stringify(form.formState)}</code>
                </>
            )}
        </Form>
    );
}

import { Form, FormInput, type FormRenderProps } from '@fibrous/semi-ui-solid';

function Fields(props: FormRenderProps) {
    return (
        <>
            <FormInput field="Role" style={{ width: '176px' }} />
            <FormInput field="UserName" style={{ width: '80px' }} />
            <FormInput field="Password" style={{ width: '176px' }} />
            <code style={{ 'margin-top': '24px' }}>{JSON.stringify(props.formState)}</code>
        </>
    );
}

export default function FormDemo() {
    return <Form component={Fields} layout="horizontal" onValueChange={(values) => console.log(values)} />;
}

import { IconUpload } from '@fibrous/semi-icons-solid';
import { Button, Col, Form, FormCascader, FormCheckbox, FormCheckboxGroup, FormDatePicker, FormInput, FormInputNumber, FormRadio, FormRadioGroup, FormRating, FormSelect, FormSlider, FormSwitch, FormTagInput, FormTextArea, FormTimePicker, FormTreeSelect, FormUpload, Row, Space } from '@fibrous/semi-ui-solid';

const today = new Date(2024, 4, 6, 12);

const initValues = {
    name: 'semi',
    business: ['ulikeCam'],
    role: 'ued',
    switch: true,
    files: [
        {
            uid: '1',
            name: 'vigo.png',
            status: 'success',
            size: '130KB',
            preview: true,
            url: '/assets/placeholder/avatar-d.svg',
        },
        {
            uid: '2',
            name: 'resso.jpeg',
            status: 'validateFail',
            size: '222KB',
            percent: 50,
            preview: true,
            fileInstance: new File([new ArrayBuffer(2048)], 'resso.jpeg', { type: 'image/jpeg' }),
            url: '/assets/placeholder/avatar-b.svg',
        },
        {
            uid: '3',
            name: 'douyin.jpeg',
            status: 'uploading',
            size: '222KB',
            percent: 50,
            preview: true,
            fileInstance: new File([new ArrayBuffer(2048)], 'dy.jpeg', { type: 'image/jpeg' }),
            url: '/assets/placeholder/avatar-a.svg',
        },
    ],
};

const treeData = [
    {
        label: '亚洲',
        value: 'Asia',
        key: '0',
        children: [
            {
                label: '中国',
                value: 'China',
                key: '0-0',
                children: [
                    {
                        label: '北京',
                        value: 'Beijing',
                        key: '0-0-0',
                    },
                    {
                        label: '上海',
                        value: 'Shanghai',
                        key: '0-0-1',
                    },
                ],
            },
        ],
    },
    {
        label: '北美洲',
        value: 'North America',
        key: '1',
    },
];

const style = { width: '90%' };

export default function FormDemo() {
    return (
        <Form initValues={initValues} style={{ padding: '10px', width: '100%' }} onValueChange={(v) => console.log(v)}>
            <Form.Section text="基本信息">
                <Row>
                    <Col span={12}>
                        <FormInput field="name" label="名称（Input）" initValue="mikeya" style={style} trigger="blur" />
                    </Col>
                    <Col span={12}>
                        <FormDatePicker field="date" label="日期（DatePicker）" style={style} initValue={today} placeholder="请选择生效日期" />
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormSelect field="role" style={style} label="角色（Select）" placeholder="请选择你的角色">
                            <FormSelect.Option value="operate">运营</FormSelect.Option>
                            <FormSelect.Option value="rd">开发</FormSelect.Option>
                            <FormSelect.Option value="pm">产品</FormSelect.Option>
                            <FormSelect.Option value="ued">设计</FormSelect.Option>
                        </FormSelect>
                    </Col>
                    <Col span={12}>
                        <FormSelect field="business" multiple style={style} placeholder="请选择业务线" label="业务线（多选Select）" extraText={<div style={{ color: 'var(--semi-blue-5)', 'font-size': '14px', 'user-select': 'none', cursor: 'pointer' }}>没有找到合适的业务线？</div>}>
                            <FormSelect.Option value="abc">Semi</FormSelect.Option>
                            <FormSelect.Option value="ulikeCam">轻颜相机</FormSelect.Option>
                            <FormSelect.Option value="toutiao">今日头条</FormSelect.Option>
                        </FormSelect>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormCascader placeholder="请选择所在地区" treeData={treeData} field="area" label="地区（Cascader）" style={style} />
                    </Col>
                    <Col span={12}>
                        <FormTreeSelect field="tree" style={style} label="节点（TreeSelect）" placeholder="请选择服务节点" treeData={treeData} filterTreeNode />
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormTagInput field="product" label="产品（TagInput）" initValue={['abc', 'ulikeCam']} placeholder="请输入产品" style={style} />
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <FormUpload field="files" label="证明文件（Upload）" action="//semi.design/api/upload">
                            <Button icon={<IconUpload />} theme="light">
                                点击上传
                            </Button>
                        </FormUpload>
                    </Col>
                </Row>
            </Form.Section>
            <Form.Section text="资源详情">
                <Row>
                    <Col span={12}>
                        <FormTextArea style={{ ...style, height: '120px' }} field="description" label="申请理由（TextArea）" placeholder="请填写申请资源理由" />
                    </Col>
                    <Col span={12}>
                        <FormCheckboxGroup field="type" direction="horizontal" label="申请类型（CheckboxGroup）" initValue={['user', 'admin']} rules={[{ required: true }]}>
                            <FormCheckbox value="admin">admin</FormCheckbox>
                            <FormCheckbox value="user">user</FormCheckbox>
                            <FormCheckbox value="guest">guest</FormCheckbox>
                            <FormCheckbox value="root">root</FormCheckbox>
                        </FormCheckboxGroup>
                        <FormRadioGroup field="isMonopolize" label="是否独占资源（Radio）" rules={[{ type: 'boolean' }, { required: true, message: '必须选择是否独占 ' }]}>
                            <FormRadio value={1}>是</FormRadio>
                            <FormRadio value={0}>否</FormRadio>
                        </FormRadioGroup>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormTimePicker field="time" label="截止时刻（TimePicker）" style={{ width: '90%' }} />
                    </Col>
                    <Col span={12}>
                        <FormInputNumber field="number" label="申请数量（InputNumber）" initValue={20} style={style} />
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormSlider field="range" label="资源使用报警阈值(%)（Slider）" initValue={10} style={{ width: '90%' }} />
                    </Col>
                    <Col span={12}>
                        <FormSwitch field="switch" label="开关(Switch)" />
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormRating field="rating" label="满意度(Rating)" initValue={2} style={{ width: '90%' }} />
                    </Col>
                </Row>
            </Form.Section>
            <FormCheckbox value="false" field="agree" noLabel>
                我已阅读并清楚相关规定（Checkbox）
            </FormCheckbox>
            <Space>
                <Button type="primary" htmlType="submit" class="btn-margin-right">
                    提交(submit)
                </Button>
                <Button htmlType="reset">重置(reset)</Button>
            </Space>
        </Form>
    );
}

import { Col, Form, FormInput, Row, TextArea, Toast } from '@fibrous/semi-ui-solid';

export default function FormDemo() {
    return (
        <Form onSubmit={(values) => Toast.info({ content: JSON.stringify(values) })}>
            {(form) => (
                <Row>
                    <Col span={12}>
                        <FormInput field="username" aria-label="username" placeholder="请尝试输入值" />
                        <FormInput field="user[0]" aria-label="user[0]" placeholder="请尝试输入值" />
                        <FormInput field="siblings.1" aria-label="siblings.1" placeholder="请尝试输入值" />
                        <FormInput field="siblings['2']" aria-label="siblings['2']" placeholder="请尝试输入值" />
                        <FormInput field="parents[0].name" aria-label="parents[0].name" placeholder="请尝试输入值" />
                        <FormInput field="parents[1]['name']" aria-label="parents[1]['name']" placeholder="请尝试输入值" />
                    </Col>
                    <Col span={10} offset={1} style={{ 'margin-top': '12px' }}>
                        <Form.Label text="FormState实时映射值：" />
                        <TextArea aria-label="FormState实时映射值" value={JSON.stringify(form.formState.values)} />
                    </Col>
                </Row>
            )}
        </Form>
    );
}

import { Button, Form, FormCheckbox, FormInput, Toast } from '@fibrous/semi-ui-solid';

export default function FormDemo() {
    const handleSubmit = (values: Record<string, unknown>) => {
        console.log(values);
        Toast.info('表单已提交');
    };
    return (
        <Form onSubmit={(values) => handleSubmit(values)} style={{ width: '400px' }}>
            {(form) => (
                <>
                    <FormInput field="phone" label="PhoneNumber" style={{ width: '100%' }} placeholder="Enter your phone number" />
                    <FormInput field="password" label="Password" style={{ width: '100%' }} placeholder="Enter your password" />
                    <FormCheckbox field="agree" noLabel>
                        I have read and agree to the terms of service
                    </FormCheckbox>
                    <div style={{ display: 'flex', 'justify-content': 'space-between', 'align-items': 'center' }}>
                        <p>
                            <span>Or</span>
                            <Button theme="borderless" style={{ color: 'var(--semi-color-primary)', 'margin-left': '10px', cursor: 'pointer' }}>
                                Sign up
                            </Button>
                        </p>
                        <Button disabled={!form.values.agree} htmlType="submit" type="tertiary">
                            Log in
                        </Button>
                    </div>
                </>
            )}
        </Form>
    );
}

import { Form, FormInput } from '@fibrous/semi-ui-solid';

export default function FormDemo() {
    return (
        <Form layout="horizontal">
            <FormInput field="phone" label="PhoneNumber" placeholder="Enter your phone number" />
            <FormInput field="password" label="Password" placeholder="Enter your password" />
        </Form>
    );
}

import { createSignal } from 'solid-js';
import { Form, FormCheckbox, FormCheckboxGroup, FormInput, FormInputNumber, FormRadio, FormRadioGroup, FormSelect, FormSwitch, Select, type FormProps } from '@fibrous/semi-ui-solid';

const rules = [
    { required: true, message: 'required error' },
    { type: 'string' as const, message: 'type error' },
    { validator: (_rule: unknown, value: unknown) => value === 'semi', message: 'should be semi' },
];

export default function FormDemo() {
    const [labelPosition, setLabelPosition] = createSignal<FormProps['labelPosition']>('left');
    const [labelAlign, setLabelAlign] = createSignal<FormProps['labelAlign']>('left');
    const labelWidth = () => (labelPosition() === 'left' ? '180px' : 'auto');

    return (
        <>
            <div style={{ 'border-bottom': '1px solid var(--semi-color-border)', 'padding-bottom': '12px' }}>
                <Form.Label style={{ 'margin-left': '10px' }}>切换Label位置:</Form.Label>
                <Select onChange={(value) => setLabelPosition(value as FormProps['labelPosition'])} value={labelPosition()} style={{ width: '200px' }} prefix="labelPosition">
                    <Select.Option value="top">top</Select.Option>
                    <Select.Option value="left">left</Select.Option>
                </Select>
                <Form.Label style={{ 'margin-left': '10px' }}>切换Label文本对齐方向:</Form.Label>
                <Select onChange={(value) => setLabelAlign(value as FormProps['labelAlign'])} value={labelAlign()} style={{ width: '200px' }} prefix="labelAlign">
                    <Select.Option value="left">left</Select.Option>
                    <Select.Option value="right">right</Select.Option>
                </Select>
            </div>
            <Form labelPosition={labelPosition()} labelWidth={labelWidth()} labelAlign={labelAlign()} style={{ padding: '10px', width: '600px' }}>
                <FormInput field="input" label="手机号码" trigger="blur" style={{ width: '200px' }} rules={rules} />
                <FormSwitch label="是否同意" field="agree" />
                <FormInputNumber field="price" label="价格" style={{ width: '200px' }} />
                <FormSelect label="姓名" field="name" style={{ width: '200px' }}>
                    <FormSelect.Option value="mike">mike</FormSelect.Option>
                    <FormSelect.Option value="jane">jane</FormSelect.Option>
                    <FormSelect.Option value="kate">kate</FormSelect.Option>
                </FormSelect>
                <FormCheckboxGroup label="角色" field="role" direction="horizontal">
                    <FormCheckbox value="admin">admin</FormCheckbox>
                    <FormCheckbox value="user">user</FormCheckbox>
                    <FormCheckbox value="guest">guest</FormCheckbox>
                    <FormCheckbox value="root">root</FormCheckbox>
                </FormCheckboxGroup>
                <FormRadioGroup field="性别">
                    <FormRadio value="1">man</FormRadio>
                    <FormRadio value="2">woman</FormRadio>
                </FormRadioGroup>
            </Form>
        </>
    );
}

import { Col, Form, FormDatePicker, FormInput, FormSelect, Row } from '@fibrous/semi-ui-solid';

const rules = [
    { required: true, message: 'required error' },
    { type: 'string' as const, message: 'type error' },
    { validator: (_rule: unknown, value: unknown) => value === 'semi', message: 'should be semi' },
];

export default function FormDemo() {
    return (
        <Form labelPosition="top" style={{ padding: '10px' }}>
            <Row>
                <Col span={8}>
                    <FormInput field="nickName1" label="用户名" style={{ width: '250px' }} trigger="blur" rules={rules} />
                </Col>
                <Col span={8}>
                    <FormDatePicker field="date1" label="有效日期" style={{ width: '250px' }} />
                </Col>
                <Col span={8}>
                    <FormSelect label="业务线" field="business1" style={{ width: '250px' }}>
                        <FormSelect.Option value="abc">Semi</FormSelect.Option>
                        <FormSelect.Option value="ulikeCam">轻颜相机</FormSelect.Option>
                        <FormSelect.Option value="toutiao">今日头条</FormSelect.Option>
                    </FormSelect>
                </Col>
            </Row>
            <Row>
                <Col span={6}>
                    <FormInput field="nickName2" label="用户名" style={{ width: '200px' }} trigger="blur" rules={rules} />
                </Col>
                <Col span={6}>
                    <FormDatePicker field="date2" label="有效日期" style={{ width: '200px' }} />
                </Col>
                <Col span={6}>
                    <FormSelect label="业务线" field="business2" style={{ width: '200px' }}>
                        <FormSelect.Option value="abc">Semi</FormSelect.Option>
                        <FormSelect.Option value="ulikeCam">轻颜相机</FormSelect.Option>
                        <FormSelect.Option value="toutiao">今日头条</FormSelect.Option>
                    </FormSelect>
                </Col>
                <Col span={6}>
                    <FormSelect field="role" label="角色" style={{ width: '200px' }}>
                        <FormSelect.Option value="operate">运营</FormSelect.Option>
                        <FormSelect.Option value="rd">开发</FormSelect.Option>
                        <FormSelect.Option value="pm">产品</FormSelect.Option>
                        <FormSelect.Option value="ued">设计</FormSelect.Option>
                    </FormSelect>
                </Col>
            </Row>
        </Form>
    );
}

import { Button, Form, FormCheckbox, FormDatePicker, FormInput, FormInputNumber, FormRadio, FormRadioGroup, FormSelect, FormSwitch, Space } from '@fibrous/semi-ui-solid';

const today = new Date(2024, 4, 6, 12);

export default function FormDemo() {
    return (
        <Form style={{ width: '560px' }}>
            <Form.Section text="基本信息">
                <FormInput field="name" label="考试名称" initValue="TCS任务平台使用" style={{ width: '560px' }} />
            </Form.Section>
            <Form.Section text="合格标准">
                <div style={{ display: 'flex' }}>
                    <FormInputNumber field="pass" initValue={60} style={{ width: '80px' }} label={{ text: '及格正确率', required: true }} />
                    <FormInputNumber field="number" initValue={10} style={{ width: '80px' }} label={{ text: '合格人数', required: true }} />
                </div>
            </Form.Section>
            <Form.Section text="考试时间">
                <FormDatePicker field="date" type="dateTime" initValue={today} style={{ width: '272px' }} label={{ text: '开始时间', required: true }} />
                <div style={{ display: 'flex' }}>
                    <FormInput field="time" label="考试时长" style={{ width: '176px' }} initValue="60" addonAfter="分钟" />
                    <FormCheckbox initValue noLabel field="auto" style={{ 'padding-top': '30px', 'margin-inline-start': '12px' }}>
                        到时间自动交卷
                    </FormCheckbox>
                </div>
                <FormRadioGroup field="type" label="有效时间" direction="vertical" initValue="always">
                    <FormRadio value="always">永久有效</FormRadio>
                    <FormRadio value="user">自定义有效期</FormRadio>
                </FormRadioGroup>
                <FormRadioGroup field="answerTime" label="答案放出时间" direction="vertical" initValue="always" rules={[{ required: true }]}>
                    <FormRadio value="always">自动放出</FormRadio>
                    <FormRadio value="user">
                        <div style={{ display: 'inline-block' }}>
                            自定义放出时间
                            <FormDatePicker type="dateTimeRange" noLabel field="customTime" style={{ width: '464px', display: 'inline-block' }} />
                        </div>
                    </FormRadio>
                </FormRadioGroup>
            </Form.Section>
            <Form.Section text="考试人员">
                <div style={{ display: 'flex' }}>
                    <FormSwitch field="open" label={{ text: '对外开放', required: true }} checkedText="开" uncheckedText="关" />
                </div>
                <FormSelect field="users" label={{ text: '考生', required: true }} style={{ width: '560px' }} multiple initValue={['1', '2', '3', '4']}>
                    <FormSelect.Option value="1">曲晨一</FormSelect.Option>
                    <FormSelect.Option value="2">夏可曼</FormSelect.Option>
                    <FormSelect.Option value="3">曲晨三</FormSelect.Option>
                    <FormSelect.Option value="4">蔡妍</FormSelect.Option>
                </FormSelect>
            </Form.Section>
            <Space>
                <Button type="primary" theme="solid" style={{ width: '120px', 'margin-top': '12px', 'margin-inline-end': '4px' }}>
                    创建考试
                </Button>
                <Button style={{ 'margin-top': '12px' }}>预览</Button>
            </Space>
        </Form>
    );
}

import { Form, FormInput, FormSelect } from '@fibrous/semi-ui-solid';

export default function FormDemo() {
    return (
        <Form wrapperCol={{ span: 20 }} labelCol={{ span: 2 }} labelPosition="left" labelAlign="right">
            <FormInput field="name" style={{ width: '250px' }} label="姓名" trigger="blur" placeholder="请输入姓名" />
            <FormSelect field="role" label="角色" placeholder="请选择角色" style={{ width: '250px' }}>
                <FormSelect.Option value="operate">运营</FormSelect.Option>
                <FormSelect.Option value="rd">开发</FormSelect.Option>
                <FormSelect.Option value="pm">产品</FormSelect.Option>
                <FormSelect.Option value="ued">设计</FormSelect.Option>
            </FormSelect>
        </Form>
    );
}

import { Form, FormInput } from '@fibrous/semi-ui-solid';

export default function FormDemo() {
    return (
        <Form onSubmit={(values) => console.log(values)} style={{ width: '400px' }}>
            <FormInput field="name" label="姓名" trigger="blur" noLabel style={{ width: '250px' }} placeholder="请输入姓名" />
            <FormInput field="purename" pure placeholder="DOM结构与普通 Input 组件完全一致" />
        </Form>
    );
}

import { Form, FormDatePicker, FormInput, FormSelect } from '@fibrous/semi-ui-solid';

const today = new Date(2024, 4, 6, 12);

export default function FormDemo() {
    return (
        <Form labelPosition="inset" layout="horizontal">
            <FormInput field="name" label="姓名" trigger="blur" style={{ width: '250px' }} placeholder="请输入姓名" initValue="semi" />
            <FormSelect field="role" label="角色" style={{ width: '250px' }} initValue="rd">
                <FormSelect.Option value="operate">运营</FormSelect.Option>
                <FormSelect.Option value="rd">开发</FormSelect.Option>
                <FormSelect.Option value="pm">产品</FormSelect.Option>
                <FormSelect.Option value="ued">设计</FormSelect.Option>
            </FormSelect>
            <FormDatePicker field="date" label="开始日期" style={{ width: '250px' }} initValue={today} />
        </Form>
    );
}

import { Form, FormInput } from '@fibrous/semi-ui-solid';

export default function FormDemo() {
    return (
        <Form onChange={(v) => console.log(v)} onSubmit={(v) => console.log(v)} style={{ width: '600px' }} labelPosition="left" labelWidth={100}>
            <FormInput field="特效名称" style={{ width: '250px' }} />
            <Form.Slot label={{ text: 'SlotA' }} error="我是SlotA的ErrorMessage">
                <div style={{ display: 'flex', 'align-items': 'center', height: '32px', 'margin-top': '8px' }}>我是Semi Form SlotA, 我是自定义的节点</div>
            </Form.Slot>
            <Form.Slot label={{ text: 'SlotB', width: 160, align: 'right' }}>
                <div style={{ display: 'flex', 'align-items': 'center', height: '100%' }}>我是Semi Form SlotB, 我的Label Align、Width与众不同</div>
            </Form.Slot>
        </Form>
    );
}

import { createSignal } from 'solid-js';
import { Form, FormInput, type CommonFieldProps, type FormElement, type InputValidateStatus as ValidateStatus } from '@fibrous/semi-ui-solid';

export default function FormDemo() {
    const [weak, setWeak] = createSignal(false);
    const [validateStatus, setValidateStatus] = createSignal<ValidateStatus>('default');
    let form: FormElement | undefined;

    const validator: CommonFieldProps['validator'] = (val) => {
        if (!val) {
            setValidateStatus('error');
            return <span>密码不能为空</span>;
        } else if (val.length <= 3) {
            setValidateStatus('warning');
            setWeak(true); // 展示 helpText
            return ''; // 校验通过
        }
        setWeak(false);
        setValidateStatus('success');
        return '';
    };

    const random = () => {
        const pw = (Math.random() * 100000).toString().slice(0, 5);
        form?.formApi.setValue('Password', pw);
        form?.formApi.setError('Password', '');
        setWeak(false);
        setValidateStatus('success');
    };

    return (
        <Form showValidateIcon ref={(node) => (form = node)} onSubmit={() => console.log('submit success')} onSubmitFail={(errors) => console.log(errors)}>
            <FormInput
                validator={validator}
                field="Password"
                validateStatus={validateStatus()}
                helpText={weak() ? <span style={{ color: 'var(--semi-color-warning)' }}>密码强度：弱</span> : ''}
                extraText={
                    <button
                        type="button"
                        style={{
                            padding: 0,
                            border: 'none',
                            background: 'none',
                            font: 'inherit',
                            color: 'var(--semi-color-link)',
                            'font-size': '14px',
                            'user-select': 'none',
                            cursor: 'pointer',
                        }}
                        onClick={random}
                    >
                        没有想到合适的密码？点击随机生成一个
                    </button>
                }
            />
        </Form>
    );
}

import { Form, FormCheckboxGroup, FormInputNumber } from '@fibrous/semi-ui-solid';

const options = [
    { label: '飞书通知', value: 'lark' },
    { label: '邮件通知', value: 'email' },
    { label: '顶部横幅通知', value: 'notification' },
];

const notifyText = '未勾选时，默认为红点提醒，消息默认进入收件人消息列表。对于重要通知，可同时勾选相应的通知方式。';
const forceText = '对于对话框通知，可指定该消息必须在指定时长后才可置为已读。';

export default function FormDemo() {
    return (
        <Form extraTextPosition="middle">
            <FormCheckboxGroup direction="horizontal" field="notify" label="通知方式" extraText={notifyText} options={options} />
            <FormInputNumber field="force" label="强制读取(可选)" placeholder="秒" extraText={forceText} extraTextPosition="bottom" />
        </Form>
    );
}

import { Button, Form, FormInput, FormSelect } from '@fibrous/semi-ui-solid';

export default function FormDemo() {
    return (
        <Form onSubmit={(values) => console.log(values)} labelPosition="top" style={{ width: '400px' }}>
            <Form.InputGroup label={{ text: <span>手机号码</span>, required: true }} labelPosition="top">
                <FormSelect style={{ width: '150px' }} field="phonePrefix" initValue="+86" rules={[{ required: true }]} showClear>
                    <FormSelect.Option value="+1">美国+1</FormSelect.Option>
                    <FormSelect.Option value="+852">香港+852</FormSelect.Option>
                    <FormSelect.Option value="+86">中国+86</FormSelect.Option>
                    <FormSelect.Option value="+81">日本+81</FormSelect.Option>
                </FormSelect>
                <FormInput initValue="18912345678" style={{ width: '250px' }} field="phoneNumber" rules={[{ required: true }]} showClear />
            </Form.InputGroup>
            <FormInput field="姓名" trigger="blur" initValue="Semi" />
            <Button htmlType="submit">提交</Button>
        </Form>
    );
}

import { createSignal } from 'solid-js';
import { Button, Col, Form, FormInput, FormSelect, Modal, Row, type FormApi } from '@fibrous/semi-ui-solid';

const message = '该项为必填项';

export default function FormDemo() {
    const [visible, setVisible] = createSignal(false);
    let formApi: FormApi | undefined;

    const handleOk = () => {
        formApi
            ?.validate()
            .then((values) => {
                console.log(values);
            })
            .catch((errors) => {
                console.log(errors);
            });
    };

    return (
        <>
            <Button onClick={() => setVisible(true)}>打开弹窗</Button>
            <Modal title="新建" visible={visible()} onOk={handleOk} style={{ width: '600px' }} onCancel={() => setVisible(false)}>
                <Form getFormApi={(api) => (formApi = api)}>
                    <Row>
                        <Col span={5}>
                            <FormSelect field="region" label="国家/地区" placeholder="请选择" style={{ width: '100%' }} rules={[{ required: true, message }]}>
                                <FormSelect.Option value="China">中国</FormSelect.Option>
                                <FormSelect.Option value="US">美国</FormSelect.Option>
                                <FormSelect.Option value="Europe">欧洲</FormSelect.Option>
                                <FormSelect.Option value="Japan">日本</FormSelect.Option>
                            </FormSelect>
                        </Col>
                        <Col span={15} offset={2}>
                            <FormInput field="owner" label="业务执行人" trigger="blur" rules={[{ required: true, message }]} />
                        </Col>
                    </Row>
                    <Row>
                        <Col span={5}>
                            <FormSelect field="area" label="投放区域" placeholder="请选择" style={{ width: '100%' }} rules={[{ required: true, message }]}>
                                <FormSelect.Option value="China">中国</FormSelect.Option>
                                <FormSelect.Option value="US">美国</FormSelect.Option>
                                <FormSelect.Option value="Europe">欧洲</FormSelect.Option>
                                <FormSelect.Option value="Japan">日本</FormSelect.Option>
                            </FormSelect>
                        </Col>
                        <Col span={15} offset={2}>
                            <FormInput field="department" label="业务执行部门" trigger="blur" rules={[{ required: true, message }]} />
                        </Col>
                    </Row>
                </Form>
            </Modal>
        </>
    );
}

import { Button, Form, FormInput } from '@fibrous/semi-ui-solid';

const initValues = {
    name: 'semi',
    shortcut: 'se',
};

const style = { width: '100%' };

const rules = [
    { required: true, message: 'required error' },
    { type: 'string' as const, message: 'type error' },
    { validator: (_rule: unknown, value: unknown) => value === 'semi', message: 'should be semi' },
    {
        validator: (_rule: unknown, value: unknown) => Boolean(typeof value === 'string' && value.startsWith('se')),
        message: 'should startsWith se',
    },
];

export default function FormDemo() {
    return (
        <Form initValues={initValues}>
            <FormInput field="name" style={style} trigger="blur" rules={rules} />
            <FormInput field="shortcut" style={style} stopValidateWithError rules={rules} />
            <Button htmlType="submit">提交</Button>
        </Form>
    );
}

import { Button, Form, FormInput } from '@fibrous/semi-ui-solid';

interface FormValues {
    name?: string;
    sex?: string;
}

const syncValidate = (values: FormValues) => {
    const errors: Record<string, unknown> = {};
    if (values.name !== 'mike') {
        errors.name = 'you must name mike';
    }
    if (values.sex !== 'female') {
        errors.sex = 'must be woman';
    }
    errors.familyName = [{ before: 'before error balabala ', after: 'after error balabala' }, 'familyName[1] error balabala'];
    return errors;
};

export default function FormDemo() {
    return (
        <Form validator={syncValidate} layout="horizontal">
            <FormInput field="name" trigger="blur" />
            <FormInput field="familyName[0].before" trigger="blur" />
            <FormInput field="familyName[0].after" trigger="blur" />
            <FormInput field="familyName[1]" trigger="blur" />
            <div style={{ display: 'flex', 'align-items': 'flex-end' }}>
                <Button type="primary" htmlType="submit" class="btn-margin-right">
                    Submit
                </Button>
                <Button htmlType="reset">reset</Button>
            </div>
        </Form>
    );
}

import { Button, Form, FormInput } from '@fibrous/semi-ui-solid';

const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

interface FormValues {
    name?: string;
    sex?: string;
}

const asyncValidate = (values: FormValues) =>
    sleep(2000).then(() => {
        const errors: FormValues = {};
        if (values.name !== 'mike') {
            errors.name = 'you must name mike';
        }
        if (values.sex !== 'female') {
            errors.sex = 'sex not valid';
        }
        return errors;
    });

export default function FormDemo() {
    return (
        <Form validator={asyncValidate} layout="horizontal">
            <FormInput field="name" trigger="blur" />
            <FormInput field="familyName[0].before" trigger="blur" />
            <FormInput field="familyName[1]" trigger="blur" />
            <FormInput field="sex" trigger="blur" />
            <div style={{ display: 'flex', 'align-items': 'flex-end' }}>
                <Button type="primary" htmlType="submit" class="btn-margin-right">
                    Submit
                </Button>
                <Button htmlType="reset">reset</Button>
            </div>
        </Form>
    );
}

import { Button, Form, FormInput } from '@fibrous/semi-ui-solid';

const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

const validateName = (val?: string) => {
    if (!val) {
        return "【sync】can't be empty";
    } else if (val.length <= 5) {
        return '【sync】must more than 5';
    }
    return '';
};

const asyncValidate = (val?: string) =>
    sleep(2000).then(() => {
        if (!val) {
            return "【async】can't be empty";
        } else if (val.length <= 5) {
            return '【async】must more than 5';
        } else {
            return '';
        }
    });

export default function FormDemo() {
    return (
        <Form>
            <FormInput field="name" label="【name】asyncValidate after 2s" validator={asyncValidate} trigger="blur" />
            <FormInput field="familyName" label="【familyName】syncValidate" validator={validateName} trigger="blur" />
            <Button htmlType="reset">reset</Button>
        </Form>
    );
}

import { Button, Form, FormInput, Toast, type FormApi } from '@fibrous/semi-ui-solid';

export default function FormDemo() {
    let formApi: FormApi | undefined;

    const handleSilentValidate = () => {
        formApi
            ?.validate({ silent: true })
            .then((values) => {
                Toast.success('表单校验通过，准备发起请求');
                console.log('发起后端请求:', values);
            })
            .catch((errors) => {
                Toast.error('表单校验未通过，但不显示错误提示');
                console.log('校验错误:', errors);
            });
    };

    const handleNormalValidate = () => {
        formApi
            ?.validate()
            .then(() => {
                Toast.success('表单校验通过');
            })
            .catch(() => {
                Toast.error('表单校验未通过，显示错误提示');
            });
    };

    return (
        <Form getFormApi={(api) => (formApi = api)} layout="horizontal">
            <FormInput
                field="username"
                label="用户名"
                rules={[
                    { required: true, message: '用户名不能为空' },
                    { min: 3, message: '用户名至少 3 个字符' },
                ]}
            />
            <FormInput
                field="email"
                label="邮箱"
                rules={[
                    { required: true, message: '邮箱不能为空' },
                    { type: 'email', message: '邮箱格式不正确' },
                ]}
            />
            <div style={{ display: 'flex', gap: '12px', 'margin-top': '12px' }}>
                <Button onClick={handleSilentValidate} type="primary">
                    静默校验（不显示错误）
                </Button>
                <Button onClick={handleNormalValidate}>普通校验（显示错误）</Button>
            </div>
        </Form>
    );
}

import { Button, Form, FormCheckboxGroup, FormInput, Space, Toast, type FormApi } from '@fibrous/semi-ui-solid';

const allFields = ['a', 'b', 'c', 'd', 'b.name'];
const options = allFields.map((item) => ({ label: item, value: item }));

const validate = (val?: string) => {
    if (!val) {
        return "can't be empty";
    } else if (val.length <= 5) {
        return <span>我是传入的节点</span>;
    }
    return;
};

export default function FormDemo() {
    let formApi: FormApi | undefined;

    const validatePartial = (type?: 'all') => {
        const scope = type === 'all' ? allFields : (formApi?.getValue('validateScope') ?? []);
        formApi
            ?.validate(scope)
            .then((values) => {
                console.log(values);
                Toast.success('pass');
            })
            .catch((error) => {
                Toast.error('error');
                console.log(error);
            });
    };

    const resetPartial = () => {
        formApi?.reset(formApi.getValue('resetScope'));
    };

    return (
        <Form getFormApi={(api) => (formApi = api)} autoScrollToError layout="horizontal">
            {(form) => (
                <>
                    <div>
                        <FormInput field="a[1]" validator={validate} trigger="blur" />
                        <FormInput field="a[0]" validator={validate} trigger="blur" />
                        <FormInput field="b.name[0]" validator={validate} trigger="blur" />
                        <FormInput field="b.name[1]" validator={validate} trigger="blur" />
                        <FormInput field="b.type" validator={validate} trigger="blur" />
                        <FormInput field="c" validator={validate} trigger="blur" />
                        <FormInput field="d" validator={validate} trigger="blur" />
                    </div>
                    <div>
                        <FormCheckboxGroup options={options} field="validateScope" label="当前希望校验的Field" initValue={['a', 'b']} direction="horizontal" />
                        <FormCheckboxGroup options={options} field="resetScope" label="当前需要Reset的Field" direction="horizontal" />
                        <Space>
                            <Button htmlType="reset">reset</Button>
                            <Button onClick={() => validatePartial('all')}>all validate</Button>
                            <Button onClick={() => validatePartial()}>partial validate {JSON.stringify(form.values.validateScope)}</Button>
                            <Button onClick={resetPartial}>partial reset</Button>
                        </Space>
                    </div>
                </>
            )}
        </Form>
    );
}