表单

<script setup lang="ts">
    import { IconHelpCircle } from '@fibrous/semi-icons-vue';
    import { Form, FormInput, FormSelect, Tooltip } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Form layout="horizontal" @valueChange="(values) => console.log(values)">
        <FormInput field="UserName" label="用户名" :style="{ width: '80px' }" />
        <FormInput field="Password" label="密码" :style="{ width: '176px' }">
            <template #labelExtra>
                <Tooltip content="详情">
                    <IconHelpCircle aria-label="帮助" :style="{ color: 'var(--semi-color-text-2)' }" />
                </Tooltip>
            </template>
        </FormInput>
        <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>
</template>

<script setup lang="ts">
    import { Form, FormInput, FormSelect } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Form layout="horizontal" @valueChange="(values) => console.log(values)">
        <template #default="{ formState }">
            <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="{ marginTop: '24px' }">{{ JSON.stringify(formState) }}</code>
        </template>
    </Form>
</template>

<script setup lang="ts">
    import type { StyleValue } from 'vue';
    import { IconUpload } from '@fibrous/semi-icons-vue';
    import {
        Button,
        Col,
        Form,
        FormCascader,
        FormCheckbox,
        FormCheckboxGroup,
        FormDatePicker,
        FormInput,
        FormInputNumber,
        FormRadio,
        FormRadioGroup,
        FormRating,
        FormSection,
        FormSelect,
        FormSlider,
        FormSwitch,
        FormTagInput,
        FormTextArea,
        FormTimePicker,
        FormTreeSelect,
        FormUpload,
        Row,
        Space,
    } from '@fibrous/semi-ui-vue';

    const today = new Date(2024, 4, 6, 10, 30, 0);

    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%' };
    const extraTextStyle: StyleValue = {
        color: 'var(--semi-blue-5)',
        fontSize: '14px',
        userSelect: 'none',
        cursor: 'pointer',
    };
</script>

<template>
    <Form :initValues="initValues" :style="{ padding: '10px', width: '100%' }" @valueChange="(values) => console.log(values)">
        <FormSection>
            <template #text>基本信息</template>
            <Row>
                <Col :span="12">
                    <FormInput field="name" initValue="mikeya" label="名称（Input）" :style="style" trigger="blur" />
                </Col>
                <Col :span="12">
                    <FormDatePicker field="date" :initValue="today" label="日期（DatePicker）" placeholder="请选择生效日期" :style="style" />
                </Col>
            </Row>
            <Row>
                <Col :span="12">
                    <FormSelect field="role" label="角色（Select）" placeholder="请选择你的角色" :style="style">
                        <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" label="业务线（多选Select）" multiple placeholder="请选择业务线" :style="style">
                        <template #extraText>
                            <div :style="extraTextStyle">没有找到合适的业务线？</div>
                        </template>
                        <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 field="area" label="地区（Cascader）" placeholder="请选择所在地区" :style="style" :treeData="treeData" />
                </Col>
                <Col :span="12">
                    <FormTreeSelect field="tree" filterTreeNode label="节点（TreeSelect）" placeholder="请选择服务节点" :style="style" :treeData="treeData" />
                </Col>
            </Row>
            <Row>
                <Col :span="12">
                    <FormTagInput field="product" :initValue="['abc', 'ulikeCam']" label="产品（TagInput）" placeholder="请输入产品" :style="style" />
                </Col>
            </Row>
            <Row>
                <Col :span="24">
                    <FormUpload action="//semi.design/api/upload" field="files" label="证明文件（Upload）">
                        <Button theme="light">
                            <template #icon>
                                <IconUpload />
                            </template>
                            点击上传
                        </Button>
                    </FormUpload>
                </Col>
            </Row>
        </FormSection>
        <FormSection>
            <template #text>资源详情</template>
            <Row>
                <Col :span="12">
                    <FormTextArea field="description" label="申请理由（TextArea）" placeholder="请填写申请资源理由" :style="{ ...style, height: '120px' }" />
                </Col>
                <Col :span="12">
                    <FormCheckboxGroup direction="horizontal" field="type" :initValue="['user', 'admin']" label="申请类型（CheckboxGroup）" :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="style" />
                </Col>
                <Col :span="12">
                    <FormInputNumber field="number" :initValue="20" label="申请数量（InputNumber）" :style="style" />
                </Col>
            </Row>
            <Row>
                <Col :span="12">
                    <FormSlider field="range" :initValue="10" label="资源使用报警阈值(%)（Slider）" :style="style" />
                </Col>
                <Col :span="12">
                    <FormSwitch field="switch" label="开关(Switch)" />
                </Col>
            </Row>
            <Row>
                <Col :span="12">
                    <FormRating field="rating" :initValue="2" label="满意度(Rating)" :style="style" />
                </Col>
            </Row>
        </FormSection>
        <FormCheckbox field="agree" noLabel value="false">我已阅读并清楚相关规定（Checkbox）</FormCheckbox>
        <Space>
            <Button class="btn-margin-right" htmlType="submit" type="primary">提交(submit)</Button>
            <Button htmlType="reset">重置(reset)</Button>
        </Space>
    </Form>
</template>

<script setup lang="ts">
    import { Col, Form, FormInput, FormLabel, Row, TextArea, Toast } from '@fibrous/semi-ui-vue';

    const onSubmit = (values: Record<string, unknown>) => Toast.info({ content: JSON.stringify(values) });
</script>

<template>
    <Form @submit="onSubmit">
        <template #default="{ formState }">
            <Row>
                <Col :span="12">
                    <FormInput aria-label="username" field="username" placeholder="请尝试输入值" />
                    <FormInput aria-label="user[0]" field="user[0]" placeholder="请尝试输入值" />
                    <FormInput aria-label="siblings.1" field="siblings.1" placeholder="请尝试输入值" />
                    <FormInput aria-label="siblings['2']" field="siblings['2']" placeholder="请尝试输入值" />
                    <FormInput aria-label="parents[0].name" field="parents[0].name" placeholder="请尝试输入值" />
                    <FormInput aria-label="parents[1]['name']" field="parents[1]['name']" placeholder="请尝试输入值" />
                </Col>
                <Col :offset="1" :span="10" :style="{ marginTop: '12px' }">
                    <FormLabel text="FormState实时映射值：" />
                    <TextArea aria-label="FormState实时映射值" :modelValue="JSON.stringify(formState.values)" />
                </Col>
            </Row>
        </template>
    </Form>
</template>

<script setup lang="ts">
    import { Button, Form, FormCheckbox, FormInput, Toast } from '@fibrous/semi-ui-vue';

    const handleSubmit = (values: Record<string, unknown>) => {
        console.log(values);
        Toast.info('表单已提交');
    };
</script>

<template>
    <Form :style="{ width: '400px' }" @submit="handleSubmit">
        <template #default="{ values }">
            <FormInput field="phone" label="PhoneNumber" placeholder="Enter your phone number" :style="{ width: '100%' }" />
            <FormInput field="password" label="Password" placeholder="Enter your password" :style="{ width: '100%' }" />
            <FormCheckbox field="agree" noLabel>I have read and agree to the terms of service</FormCheckbox>
            <div :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }">
                <p>
                    <span>Or</span>
                    <Button :style="{ color: 'var(--semi-color-primary)', marginLeft: '10px', cursor: 'pointer' }" theme="borderless"> Sign up </Button>
                </p>
                <Button :disabled="!values.agree" htmlType="submit" type="tertiary">Log in</Button>
            </div>
        </template>
    </Form>
</template>

<script setup lang="ts">
    import { Form, FormInput } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Form layout="horizontal">
        <FormInput field="phone" label="PhoneNumber" placeholder="Enter your phone number" />
        <FormInput field="password" label="Password" placeholder="Enter your password" />
    </Form>
</template>

<script setup lang="ts">
    import { computed, ref } from 'vue';
    import { Form, FormCheckbox, FormCheckboxGroup, FormInput, FormInputNumber, FormLabel, FormRadio, FormRadioGroup, FormSelect, FormSwitch, Select, type FormProps, type RuleItem } from '@fibrous/semi-ui-vue';

    const labelPosition = ref<FormProps['labelPosition']>('left');
    const labelAlign = ref<FormProps['labelAlign']>('left');
    const labelWidth = computed(() => (labelPosition.value === 'left' ? '180px' : 'auto'));

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

<template>
    <div :style="{ borderBottom: '1px solid var(--semi-color-border)', paddingBottom: '12px' }">
        <FormLabel :style="{ marginLeft: '10px' }">切换Label位置:</FormLabel>
        <Select v-model="labelPosition" aria-label="labelPosition" :style="{ width: '200px' }">
            <template #prefix>labelPosition</template>
            <Select.Option value="top">top</Select.Option>
            <Select.Option value="left">left</Select.Option>
        </Select>
        <FormLabel :style="{ marginLeft: '10px' }">切换Label文本对齐方向:</FormLabel>
        <Select v-model="labelAlign" aria-label="labelAlign" :style="{ width: '200px' }">
            <template #prefix>labelAlign</template>
            <Select.Option value="left">left</Select.Option>
            <Select.Option value="right">right</Select.Option>
        </Select>
    </div>
    <Form :key="`${labelPosition}${labelAlign}`" :labelAlign="labelAlign" :labelPosition="labelPosition" :labelWidth="labelWidth" :style="{ padding: '10px', width: '600px' }">
        <FormInput field="input" label="手机号码" :rules="rules" :style="{ width: '200px' }" trigger="blur" />
        <FormSwitch field="agree" label="是否同意" />
        <FormInputNumber field="price" label="价格" :style="{ width: '200px' }" />
        <FormSelect field="name" label="姓名" :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 direction="horizontal" field="role" label="角色">
            <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>
</template>

<script setup lang="ts">
    import { Col, Form, FormDatePicker, FormInput, FormSelect, Row, type RuleItem } from '@fibrous/semi-ui-vue';

    const nickNameRules: RuleItem[] = [
        { required: true, message: 'required error' },
        { type: 'string', message: 'type error' },
        { validator: (_rule, value) => value === 'semi', message: 'should be semi' },
    ];
</script>

<template>
    <Form labelPosition="top" :style="{ padding: '10px' }">
        <Row>
            <Col :span="8">
                <FormInput field="nickName1" label="用户名" :rules="nickNameRules" :style="{ width: '250px' }" trigger="blur" />
            </Col>
            <Col :span="8">
                <FormDatePicker field="date1" label="有效日期" :style="{ width: '250px' }" />
            </Col>
            <Col :span="8">
                <FormSelect field="business1" label="业务线" :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="用户名" :rules="nickNameRules" :style="{ width: '200px' }" trigger="blur" />
            </Col>
            <Col :span="6">
                <FormDatePicker field="date2" label="有效日期" :style="{ width: '200px' }" />
            </Col>
            <Col :span="6">
                <FormSelect field="business2" label="业务线" :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>
</template>

<script setup lang="ts">
    import { Button, Form, FormCheckbox, FormDatePicker, FormInput, FormInputNumber, FormRadio, FormRadioGroup, FormSection, FormSelect, FormSwitch, Space } from '@fibrous/semi-ui-vue';

    const today = new Date(2024, 4, 6, 10, 30, 0);
    // initValue is not a declared Boolean prop, so a bare attribute would pass an empty string
    const autoSubmit = true;
</script>

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

<script setup lang="ts">
    import { Form, FormInput, FormSelect } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Form :labelCol="{ span: 2 }" labelAlign="right" labelPosition="left" :wrapperCol="{ span: 20 }">
        <FormInput field="name" label="姓名" placeholder="请输入姓名" style="width: 250px" trigger="blur" />
        <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>
</template>

<script setup lang="ts">
    import { Form, FormInput } from '@fibrous/semi-ui-vue';
</script>

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

<script setup lang="ts">
    import { Form, FormDatePicker, FormInput, FormSelect } from '@fibrous/semi-ui-vue';

    const today = new Date(2024, 4, 6, 10, 30, 0);
</script>

<template>
    <Form labelPosition="inset" layout="horizontal">
        <FormInput field="name" initValue="semi" label="姓名" placeholder="请输入姓名" :style="{ width: '250px' }" trigger="blur" />
        <FormSelect field="role" initValue="rd" label="角色" :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>
        <FormDatePicker field="date" :initValue="today" label="开始日期" :style="{ width: '250px' }" />
    </Form>
</template>

<script setup lang="ts">
    import { Form, FormInput, FormSlot } from '@fibrous/semi-ui-vue';

    const log = (value: unknown) => console.log(value);
</script>

<template>
    <Form :labelWidth="100" labelPosition="left" style="width: 600px" @change="log" @submit="log">
        <FormInput field="特效名称" style="width: 250px" />
        <FormSlot error="我是SlotA的ErrorMessage" :label="{ text: 'SlotA' }">
            <div style="display: flex; align-items: center; height: 32px; margin-top: 8px">我是Semi Form SlotA, 我是自定义的节点</div>
        </FormSlot>
        <FormSlot :label="{ text: 'SlotB', width: 160, align: 'right' }">
            <div style="display: flex; align-items: center; height: 100%">我是Semi Form SlotB, 我的Label Align、Width与众不同</div>
        </FormSlot>
    </Form>
</template>

<script setup lang="ts">
    import { ref, useTemplateRef } from 'vue';
    import { Form, FormInput, type FormHandle, type InputValidateStatus as ValidateStatus } from '@fibrous/semi-ui-vue';

    const helpText = ref('');
    const validateStatus = ref<ValidateStatus>('default');
    const form = useTemplateRef<FormHandle>('form');

    const validator = (val?: string) => {
        if (!val) {
            validateStatus.value = 'error';
            return '密码不能为空';
        } else if (val.length <= 3) {
            validateStatus.value = 'warning';
            helpText.value = '密码强度：弱'; // 展示 helpText
            return ''; // 校验通过
        }
        helpText.value = '';
        validateStatus.value = 'success';
        return '';
    };

    const onSubmit = () => console.log('submit success');
    const onSubmitFail = (errors: unknown) => console.log(errors);

    const random = () => {
        const pw = (Math.random() * 100000).toString().slice(0, 5);
        form.value?.formApi.setValue('Password', pw);
        form.value?.formApi.setError('Password', '');
        helpText.value = '';
        validateStatus.value = 'success';
    };
</script>

<template>
    <Form ref="form" showValidateIcon @submit="onSubmit" @submitFail="onSubmitFail">
        <FormInput field="Password" :validateStatus="validateStatus" :validator="validator">
            <template v-if="helpText" #helpText>
                <span :style="{ color: 'var(--semi-color-warning)' }">{{ helpText }}</span>
            </template>
            <template #extraText>
                <button
                    :style="{
                        padding: 0,
                        border: 'none',
                        background: 'none',
                        font: 'inherit',
                        color: 'var(--semi-color-link)',
                        fontSize: '14px',
                        userSelect: 'none',
                        cursor: 'pointer',
                    }"
                    type="button"
                    @click="random"
                >
                    没有想到合适的密码？点击随机生成一个
                </button>
            </template>
        </FormInput>
    </Form>
</template>

<script setup lang="ts">
    import { Form, FormCheckboxGroup, FormInputNumber } from '@fibrous/semi-ui-vue';

    const options = [
        { label: '飞书通知', value: 'lark' },
        { label: '邮件通知', value: 'email' },
        { label: '顶部横幅通知', value: 'notification' },
    ];
    const notifyText = '未勾选时，默认为红点提醒，消息默认进入收件人消息列表。对于重要通知，可同时勾选相应的通知方式。';
    const forceText = '对于对话框通知，可指定该消息必须在指定时长后才可置为已读。';
</script>

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

<script setup lang="ts">
    import { Button, Form, FormInput, FormInputGroup, FormSelect } from '@fibrous/semi-ui-vue';

    const onSubmit = (values: unknown) => console.log(values);
</script>

<template>
    <Form labelPosition="top" :style="{ width: '400px' }" @submit="onSubmit">
        <FormInputGroup :label="{ text: '手机号码', required: true }" labelPosition="top">
            <FormSelect field="phonePrefix" initValue="+86" :rules="[{ required: true }]" showClear :style="{ width: '150px' }">
                <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 field="phoneNumber" initValue="18912345678" :rules="[{ required: true }]" showClear :style="{ width: '250px' }" />
        </FormInputGroup>
        <FormInput field="姓名" initValue="Semi" trigger="blur" />
        <Button htmlType="submit">提交</Button>
    </Form>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { Button, Col, Form, FormInput, FormSelect, Modal, Row, type FormApi } from '@fibrous/semi-ui-vue';

    const message = '该项为必填项';
    const rules = [{ required: true, message }];
    const regions = [
        { value: 'China', label: '中国' },
        { value: 'US', label: '美国' },
        { value: 'Europe', label: '欧洲' },
        { value: 'Japan', label: '日本' },
    ];

    const visible = ref(false);
    let formApi: FormApi | undefined;

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

<template>
    <Button @click="visible = true">打开弹窗</Button>
    <Modal v-model:visible="visible" :style="{ width: '600px' }" title="新建" @ok="handleOk">
        <Form @getFormApi="(api) => (formApi = api)">
            <Row>
                <Col :span="5">
                    <FormSelect field="region" label="国家/地区" placeholder="请选择" :rules="rules" :style="{ width: '100%' }">
                        <FormSelect.Option v-for="item in regions" :key="item.value" :value="item.value">
                            {{ item.label }}
                        </FormSelect.Option>
                    </FormSelect>
                </Col>
                <Col :offset="2" :span="15">
                    <FormInput field="owner" label="业务执行人" :rules="rules" trigger="blur" />
                </Col>
            </Row>
            <Row>
                <Col :span="5">
                    <FormSelect field="area" label="投放区域" placeholder="请选择" :rules="rules" :style="{ width: '100%' }">
                        <FormSelect.Option v-for="item in regions" :key="item.value" :value="item.value">
                            {{ item.label }}
                        </FormSelect.Option>
                    </FormSelect>
                </Col>
                <Col :offset="2" :span="15">
                    <FormInput field="department" label="业务执行部门" :rules="rules" trigger="blur" />
                </Col>
            </Row>
        </Form>
    </Modal>
</template>

<script setup lang="ts">
    import { Button, Form, FormInput, type RuleItem } from '@fibrous/semi-ui-vue';

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

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

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

<template>
    <Form :initValues="initValues">
        <FormInput field="name" :rules="rules" :style="style" trigger="blur" />
        <FormInput field="shortcut" :rules="rules" stopValidateWithError :style="style" />
        <Button htmlType="submit">提交</Button>
    </Form>
</template>

<script setup lang="ts">
    import { Button, Form, FormInput } from '@fibrous/semi-ui-vue';

    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;
    };
</script>

<template>
    <Form layout="horizontal" :validator="syncValidate">
        <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', alignItems: 'flex-end' }">
            <Button class="btn-margin-right" htmlType="submit" type="primary">Submit</Button>
            <Button htmlType="reset">reset</Button>
        </div>
    </Form>
</template>

<script setup lang="ts">
    import { Button, Form, FormInput } from '@fibrous/semi-ui-vue';

    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;
        });
</script>

<template>
    <Form layout="horizontal" :validator="asyncValidate">
        <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', alignItems: 'flex-end' }">
            <Button class="btn-margin-right" htmlType="submit" type="primary">Submit</Button>
            <Button htmlType="reset">reset</Button>
        </div>
    </Form>
</template>

<script setup lang="ts">
    import { Button, Form, FormInput } from '@fibrous/semi-ui-vue';

    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 '';
            }
        });
</script>

<template>
    <Form>
        <FormInput field="name" label="【name】asyncValidate after 2s" trigger="blur" :validator="asyncValidate" />
        <FormInput field="familyName" label="【familyName】syncValidate" trigger="blur" :validator="validateName" />
        <Button htmlType="reset">reset</Button>
    </Form>
</template>

<script setup lang="ts">
    import { shallowRef } from 'vue';
    import { Button, Form, FormInput, Toast, type FormApi } from '@fibrous/semi-ui-vue';

    const formApi = shallowRef<FormApi>();

    const usernameRules = [
        { required: true, message: '用户名不能为空' },
        { min: 3, message: '用户名至少 3 个字符' },
    ];
    const emailRules = [
        { required: true, message: '邮箱不能为空' },
        { type: 'email' as const, message: '邮箱格式不正确' },
    ];

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

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

<template>
    <Form layout="horizontal" @getFormApi="formApi = $event">
        <FormInput field="username" label="用户名" :rules="usernameRules" />
        <FormInput field="email" label="邮箱" :rules="emailRules" />
        <div style="display: flex; gap: 12px; margin-top: 12px">
            <Button type="primary" @click="handleSilentValidate">静默校验（不显示错误）</Button>
            <Button @click="handleNormalValidate">普通校验（显示错误）</Button>
        </div>
    </Form>
</template>