Examples

Contact Form

<template>
  <VsCompactForm
    v-model:form="form"
    v-model:formValues="formValues"
    :schema="contactSchema"
    @handle-submit="submitContact"
  />
</template>

<script setup>
  import { ref } from 'vue';

  const form = ref({});
  const formValues = ref({});

  const contactSchema = [
    {
      name: 'firstName',
      type: 'text',
      label: 'First Name',
      rules: ['required'],
    },
    {
      name: 'lastName',
      type: 'text',
      label: 'Last Name',
      rules: ['required'],
    },
    {
      name: 'email',
      type: 'text',
      label: 'Email',
      rules: ['required', 'email'],
    },
    {
      name: 'phone',
      type: 'text',
      label: 'Phone',
      rules: [
        {
          type: 'regexp',
          pattern: /^\+?[\d\s\-\(\)]+$/,
          message: 'Invalid phone number format',
        },
      ],
    },
    {
      name: 'message',
      type: 'text',
      label: 'Message',
      rules: ['required'],
    },
  ];

  const submitContact = values => {
    console.log('Contact form submitted:', values);
    // Send to API, etc.
  };
</script>

User Registration Form

<template>
  <VsCompactForm
    v-model:form="form"
    v-model:formValues="formValues"
    :schema="registrationSchema"
    @handle-submit="registerUser"
  />
</template>

<script setup>
  import { ref } from 'vue';

  const form = ref({});
  const formValues = ref({});

  const registrationSchema = [
    {
      name: 'personal',
      type: 'container',
      label: 'Personal Information',
      schema: [
        {
          name: 'username',
          type: 'text',
          label: 'Username',
          rules: ['required'],
        },
        {
          name: 'email',
          type: 'text',
          label: 'Email',
          rules: ['required', 'email'],
        },
        {
          name: 'password',
          type: 'text',
          label: 'Password',
          rules: [
            'required',
            {
              type: 'custom',
              function: '(value) => value.length >= 8',
              message: 'Password must be at least 8 characters',
            },
          ],
        },
      ],
    },
    {
      name: 'preferences',
      type: 'container',
      label: 'Preferences',
      schema: [
        {
          name: 'newsletter',
          type: 'switcher',
          label: 'Subscribe to newsletter',
        },
        {
          name: 'notifications',
          type: 'radio',
          label: 'Notification frequency',
          options: [
            { id: 'daily', text: 'Daily' },
            { id: 'weekly', text: 'Weekly' },
            { id: 'never', text: 'Never' },
          ],
        },
      ],
    },
  ];

  const registerUser = values => {
    console.log('User registration:', values);
    // Register user logic
  };
</script>