lc-form

Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

• VS Code + Volar

Jest (Unit tests)

In development mode run the command yarn test:watch

In production mode run the command yarn test:prod

Installation

NPM / YARN

Install the package:

npm install lc-form --save
yarn add lc-form

main.js

// css
import 'lc-form/style.css'

// js
import { createApp } from 'vue'
import LcForm from 'lc-form'
import App from './App.vue'

const app = createApp(App)
app.use(LcForm, {
  baseUrl: '',
  gmapsApiKey: '',
  filestackApiKey: '',
  filestackWorkflows: '',
  tinymceApiKey: '',
  tinymceUploadUrlApi: '',
  tinymceUploadDirectory: '',
  s3FolderUrl: '',
})
app.use(router).mount('#app')

component.vue

<script setup lang="ts">
  import { reactive } from 'vue'
  import { BaseForm, useButtons } from 'lc-form'

  import groupFields from './path'

  import type { FormValues } from 'lc-form/types'

  const { btnPrimary, btnSecondary } = useButtons()
  const groupFieldsForm = reactive([groupFields()])

  const initialData = reactive({
    fields1: '',
    fields2: '',
  })

  const mutation = (data: FormValues) => ({
    request: () => Promise.resolve({ data: '' }),
  })

  const onSubmit = () => ({
    success: () => {
      // success code
    },
    error: () => {
      // error code
    },
  })

  const onCancel = () => {
    // cancel code
  }
</script>

<template>
  <base-form
    :button-primary="btnPrimary"
    :button-secondary="btnSecondary"
    :group-fields="groupFieldsForm"
    :initial-data="initialData"
    :mutation="mutation"
    :on-submit="onSubmit"
    id-form="myIdentifier"
    @on-cancel="onCancel"
  />
</template>