useFormWrapper

A composable that manages form dialog state and data handling for create and edit operations. This utility simplifies handling form dialogs by providing state management for the dialog visibility, form data, and loading states.

Usage

import { ref } from 'vue'
import { useFormWrapper } from '#imports'

// With a custom load function
const { dialog, formModel, loadingFormModel, create, edit } = useFormWrapper({
  load: async (item) => {
    // Load and transform data for editing
    const response = await api.get(`users/${item.id}`)
    return response.data
  }
})

Type Signature

interface UseFormWrapper {
  load?: (item: any) => Promise<any>;
}

function useFormWrapper(options: UseFormWrapper): {
  dialog: Ref<boolean>;
  formModel: Ref<any>;
  loadingFormModel: Ref<any>;
  create: () => void;
  edit: (item: any) => Promise<void>;
}

Parameters

Parameter	Type	Description
options	UseFormWrapper	Configuration options for the form wrapper
options.load	(item: any) => Promise<any>	Optional function to load data when editing an item

Return Value

Property	Type	Description
dialog	Ref<boolean>	Controls the visibility of the form dialog
formModel	Ref<any>	Contains the current form data
loadingFormModel	Ref<any>	Contains the ID of the item being loaded, or null if not loading
create	() => void	Function to open a blank form for creating a new item
edit	(item: any) => Promise<void>	Function to load data and open the form for editing an existing item
createWithValues	(item: any) => Promise<void>	Function to open a form pre-filled with the provided values

Examples

Basic CRUD with Dialog

<template>
  <div>
    <we-datatable-persist
      resource="sites"
      @click:row="edit"
      @new="create"
    />

    <form-wrapper
      v-model="dialog"
      scrollable
      max-width="700"
      variant="panel"
    >
      <form-sites
        ref="form"
        v-model="formModel"
        @update:model-value="closeAndRefresh"
        @deleted="closeAndRefresh"
      />
    </form-wrapper>
  </div>
  
  <!-- Example: open form pre-filled with values using createWithValues -->

  <we-datatable-persist
    resource="sites"
    @click:row="edit"
    @new="openDialogWithValues"
  />

  <form-wrapper
    v-model="dialog"
    scrollable
    max-width="700"
    variant="panel"
  >
    <form-sites
      ref="form"
      v-model="formModel"
      @update:model-value="closeAndRefresh"
      @deleted="closeAndRefresh"
    />
  </form-wrapper>
</template>

<script setup>
const form = useTemplateRef('form')

const { dialog, formModel, loadingFormModel, create, createWithValues, edit } = useFormWrapper({
  load: ({ id }) => {
    return form.value.load(id)
  },
})

function openDialogWithValues() {
  createWithValues({ first_name: 'Mario', last_name: 'Rossi' })
}

</script>

Source Code