form-vue-testing

This template should help get you started developing with Vue 3 in Vite.

Customize configuration

See Vite Configuration Reference.

Project Setup

yarn
or
npm

Compile and Hot-Reload for Development

yarn dev
or
npm run dev

Compile and Minify for Production

yarn build
or
npm run build

Lint with ESLint

yarn lint
or
npm run lint

To install package

yarn add test-title
or
npm install test-title

To use the form in the component

• import all components

import {
  Form,
  Label,
  Input,
  TextArea,
  Button
} from 'test-title'

• Form accepts parameters

  • required :formId (the id of your form on getform)
  • required :initialValues - the initial values for the form

    {field name: initial value}

  • optional parameter onCustomSubmit - your custom submit handler
  • optional parameter className - class name for custom styling

• Label accepts parameters

  • required label - the label text
  • required name - the name of the input current label is for
  • optional parameter className - class name for custom styling
  • optional parameter tooltipClassName - class name for custom styling Tooltip

• Input and TextareaComponent accepts parameters

  • required placeholder
  • required type
  • required name
  • optional validator - the string in form of value or value1|value2. Validators may be required, email, onlyLetters or combination e.g. onlyLetters|required
  • optional parameter className - class name for custom styling

• Button accepts parameters:

  • required label - string with text
  • type - type of the button
  • optional parameter className - class name for custom styling

Example

    <Form :formId="apiKey" :initialValues="{ name: '', email: '', message: '' }" className="my-custom-class">
      <Label label="Your Name" name="name">
        <Input type="text" placeholder="Your Name" name="name" validator="required|onlyLetters" />
      </Label>
      <Label label="Email Address" name="email">
        <Input placeholder="Email Address" type="email" name="email" validator="required|email" />
      </Label>
      <Label label="Message" name="message">
        <TextArea placeholder="Message" name="message" validator="required" />
      </Label>
      <Button label="Send form" type="submit" />
    </Form>