TUI

<template>
  <TsForm :model="formData" :rules="rules" ref="normalFormRef" labelWidth="100px">
    <TsFormItem label="Username" prop="username" required>
      <TsInput v-model="formData.username" placeholder="Enter username" />
    </TsFormItem>

    <TsFormItem label="Password" prop="password" required>
      <TsInput v-model="formData.password" type="password" placeholder="Enter password" />
    </TsFormItem>

    <TsFormItem label="Email" prop="email">
      <TsInput v-model="formData.email" placeholder="Enter email" />
    </TsFormItem>

    <TsFormItem>
      <TsButton type="primary" @click="handleNormalSubmit">Submit</TsButton>
      <TsButton @click="resetNormalForm" style="margin-left: 10px">Reset</TsButton>
    </TsFormItem>
  </TsForm>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const rules: FormRules = {
    username: [
      { required: true, message: 'Please input username', trigger: 'blur' },
      { min: 3, max: 10, message: 'Length should be 3 to 10', trigger: 'blur' },
    ],
    password: [
      { required: true, message: 'Please input password', trigger: 'blur' },
      { min: 6, message: 'At least 6 characters', trigger: 'blur' },
    ],
    email: [{ type: 'email', message: 'Please input correct email', trigger: 'blur' }],
  };

  const formData = ref({
    username: '',
    password: '',
    email: '',
    gender: '',
    agree: false,
  });

  const handleNormalSubmit = async () => {
    await normalFormRef.value?.validate();
  };

  const resetNormalForm = () => {
    normalFormRef.value?.resetFields();
  };
</script>

<template>
  <TsForm :model="formData" :rules="rules" ref="searchFormRef" inline>
    <TsFormItem label="Username" prop="username" required>
      <TsInput v-model="formData.username" placeholder="Enter username" clearable />
    </TsFormItem>

    <TsFormItem label="Password" prop="password" required>
      <TsInput v-model="formData.password" type="password" placeholder="Enter password" />
    </TsFormItem>

    <TsFormItem label="Email" prop="email">
      <TsInput v-model="formData.email" placeholder="Enter email" />
    </TsFormItem>

    <TsFormItem>
      <TsButton type="primary" :loading="searchLoading" @click="handleSearch">Search</TsButton>
      <TsButton @click="handleRestSearch" style="margin-left: 10px">Reset</TsButton>
    </TsFormItem>
  </TsForm>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const rules: FormRules = {
    username: [
      { required: true, message: 'Please input username', trigger: 'blur' },
      { min: 3, max: 10, message: 'Length should be 3 to 10', trigger: 'blur' },
    ],
    password: [
      { required: true, message: 'Please input password', trigger: 'blur' },
      { min: 6, message: 'At least 6 characters', trigger: 'blur' },
    ],
    email: [{ type: 'email', message: 'Please input correct email', trigger: 'blur' }],
  };

  const formData = ref({
    username: '',
    password: '',
    email: '',
    gender: '',
    agree: false,
  });

  const searchLoading = ref(false);

  const handleSearch = () => {
    if (!searchFormRef.value || searchLoading.value) return;

    searchFormRef.value.validate().then((validated) => {
      console.log(validated);
      if (!validated) return;

      searchLoading.value = true;
      setTimeout(() => {
        TsToast({ message: '搜索成功', type: 'success' });
        searchLoading.value = false;
      }, 2000);
    });
  };

  const handleRestSearch = () => {
    searchFormRef.value?.resetFields();
  };
</script>

<template>
  <TsForm :model="formData" :rules="rules" ref="formRef" labelPosition="top">
  <TsFormItem label="Username" prop="username" required>
    <TsInput v-model="formData.username" placeholder="Enter username" />
  </TsFormItem>

  <TsFormItem label="Password" prop="password" required>
    <TsInput v-model="formData.password" type="password" placeholder="Enter password" />
  </TsFormItem>

  <TsFormItem label="Email" prop="email">
    <TsInput v-model="formData.email" placeholder="Enter email" />
  </TsFormItem>

  <TsFormItem label="Gender" prop="gender">
    <TsSelect v-model="formData.gender" :options="genderOption" placeholder="Select gender" />
  </TsFormItem>

  <TsFormItem label="Agree" prop="agree">
    <TsSwitch v-model="formData.agree" placeholder="Choose agree" />
  </TsFormItem>

  <TsFormItem>
    <TsButton type="primary" @click="handleSubmit">Submit</TsButton>
    <TsButton @click="resetForm" style="margin-left: 10px">Reset</TsButton>
  </TsFormItem>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const rules: FormRules = {
    username: [
      { required: true, message: 'Please input username', trigger: 'blur' },
      { min: 3, max: 10, message: 'Length should be 3 to 10', trigger: 'blur' },
    ],
    password: [
      { required: true, message: 'Please input password', trigger: 'blur' },
      { min: 6, message: 'At least 6 characters', trigger: 'blur' },
    ],
    email: [{ type: 'email', message: 'Please input correct email', trigger: 'blur' }],
  };

  const formData = ref({
    username: '',
    password: '',
    email: '',
    gender: '',
    agree: false,
  });

  const handleSubmit = async () => {
    try {
      await formRef.value?.validate();
      console.log('Form submitted:', formData.value);
    } catch (error) {
      console.error('Form validation failed:', error);
    }
  };

  // Reset form
  const resetForm = () => {
    formRef.value?.resetFields();
    formRef.value?.clearValidate();
  };
</script>