use/useViewCreate

Overview

Provides all reactive state and behaviour for a create view that collects field values from a form and submits a new model instance to the server. Handles model configuration, initial value derivation, form context setup, action availability, error combination, and submission handling.

Used directly by ViewCreate.vue and intended as a building block for custom create-view shells in consuming projects.

Examples

<script setup>
import FormConfirmDialog from "@vueda/form/confirm/FormConfirmDialog.vue";
import { useViewCreate } from "@vueda/use/useViewCreate.js";
import { memoizedStartCase } from "@vueda/utils/case.js";
import { onMounted, toRef } from "vue";

const props = defineProps({ app: String, model: String, redirectAfter: String });
const emit = defineEmits(["form-object", "form-context"]);
const { formContext, objectForm, instance, actions } = useViewCreate(props);

onMounted(() => {
    emit("form-object", toRef(() => formContext.state.values));
    emit("form-context", formContext);
});
</script>
<template>
    <!-- ...form markup (see examples below)... -->
    <!-- Required: resolves submit-time warning confirmations (HTTP 409); without it warned saves are cancelled. -->
    <FormConfirmDialog :controller="objectForm.confirmation" />
</template>

<h1>{{ instance.titleStr }}</h1>

<error-display
    :error="instance.combinedError"
    :errored="instance.combinedErrored"
    :ignore-form-validation-errors="true"
    :while-text="instance.combinedWhileText"
/>
<form :id="instance.formId" @submit.prevent="objectForm.submit">
    <form-model
        :app="app"
        :model="model"
        view="create"
        v-bind="instance.combinedFormProps"
    />
</form>

<Button :form="instance.formId" :disabled="objectForm.state.loading" type="submit">
    Submit
</Button>

Methods

• useViewCreate - Extracts all reactive state and wiring for a create view of a model instance.

Types

ViewCreateActionsGroup

ViewCreateContext

ViewCreateInstanceGroup

ViewCreateOptions

Required identification.

Source

client/lib/use/useViewCreate.js:1