Open-Source
Form Framework for Vue

<template>
  <Vueform>
    <TagsElement name="tags"
      :search="true"
      :items="['Tailwind', 'Bootstrap', 'Bulma', '...']"
    />
    <SliderElement name="slider"
      :max="1000"
      :merge="100"
      :format="{ prefix: '$', decimals: 2 }"
    />
    <PhoneElement name="phone"
      allow-incomplete
    />
    <DatesElement name="dates"
      mode="range"
    />
    <ToggleElement name="toggle">
      Receive notifications
    </ToggleElement>
    <MultifileElement name="multifile"
      view="image"
      :file="{ softRemove: true }"
    />
  </Vueform>
</template>

<template>
  <Vueform>
    <h3>Work history</h3>
    <ListElement name="history">
      <template #default="{ index }">
        <ObjectElement :name="index" :replaceClasses="{ ElementLayout: { outerWrapper: 'flex-1 rounded-lg pt-8 px-4 pb-4 mb-4 shadow-box' } }">
          <TextElement name="name" placeholder="Company name" />
          <LocationElement name="address" placeholder="Address" />
          <TagsElement name="skills" placeholder="Skills used" :search="true" :items="[...]" />
          <DateElement name="from" placeholder="From" :columns="4" />
          <DateElement name="to" placeholder="To" :columns="4" :conditions="[['history.*.present', false]]" />
          <CheckboxElement name="present" :columns="4">
            Working here
          </CheckboxElement>
        </ObjectElement>
      </template>
    </ListElement>
  </Vueform>
</template>

<template>
  <Vueform v-bind="$data" />
</template>
<script>
export default {
  data: () => ({
    endpoint: '/submit/survey/489432',
    schema: {
      title: { type: 'static', content: `<div class='font-semibold text-2xl'>Survey</div><p class='text-gray-500 m-0'>Please fill in this survey</p>` },
      question1: { type: 'text', label: 'Your name' },
      question2: { type: 'text', label: 'Your age', columns: 6 },
      question3: { type: 'select', label: 'Your gender', items: ['Male', 'Female', 'X'], columns: 6 },
      question4: { type: 'select', label: 'How likely are you to recommend our services?', default: 10, items: [1,2,3,4,5,6,7,8,9,10], description: '1 means very unlikely, 10 means very likely' },
      button: { type: 'button', buttonLabel: 'Submit', submits: true, },
    }
  })
}
</script>

<template>
  <Vueform>
    <TextElement name="text" placeholder="Text"
      rules="required"
    />
    <TextElement name="url" placeholder="Url"
      rules="url"
    />
    <TextElement name="email" placeholder="Email"
      rules="exists:users"
    />
    <DateElement name="date" placeholder="Date"
      rules="after:today"
    />
    <TextElement name="password" placeholder="Password"
      rules="confirmed"
    />
    <TextElement name="password_confirmation" placeholder="Password again"
    />
    <CheckboxElement name="terms"
      rules="accepted"
    >I accept the Terms of Use</CheckboxElement>
  </Vueform>
</template>

<template>
  <Vueform>
    <template #empty>
      <FormSteps>
        <FormStep name="personal" :elements="['name', 'bio']"
        />Personal</FormStep>
        <FormStep name="account" :elements="['email', 'password']"
        />Account</FormStep>
        <FormStep name="social" :elements="['facebook', 'twitter']"
        />Social</FormStep>
      </FormSteps>
      <FormElements>
        <TextElement name="name" label="Name" />
        <TextareaElement name="bio" label="bio" rows="8" />
        <TextElement name="email" label="Email" />
        <TextElement input-type="password" name="password" label="Password" />
        <TextElement name="facebook" label="Facebook" />
        <TextElement name="twitter" label="Twitter" />
      </FormElements>
      <FormStepsControls />
    </template>
  </Vueform>
</template>

<template>
  <Vueform multilingual>
    <TTextEelement
      name="title"
      label="Title"
    />
    <TEditorElement
      name="content"
      label="Content"
    />
  </Vueform>
</template>