Form Readonly

The VInfoFormReadOnly component displays structured read-only information, typically used for review sections or forms where users can view but not edit content. It supports a title, a list of information slots, and an optional "Edit" or "Review" button. Location: UiKit/components/VInfo/VInfoFormReadOnly.vue

Props

Prop Name	Type	Default	Description
`data`	`IReadOnlyForm`	`null`	Object containing a title and an array of `IInfoSlot` items.
`review`	`boolean`	`false`	If `true`, displays a "Review" button instead of "Edit".
`loading`	`boolean`	`false`	Enables loading state, displaying skeleton placeholders.

IReadOnlyForm Interface

interface IReadOnlyForm {
  title: string;
  data?: IInfoSlot[];
}
interface IInfoSlot {
  title: string;
  text: string;
}

Events

edit - Emits when the "Edit" button is clicked.

Example

vue

<script setup lang="ts">
import VInfoFormReadOnly from 'UiKit/components/VInfo/VInfoFormReadOnly.vue';

const formData = {
  title: "User Information",
  data: [
    { title: "Name", text: "Jane Doe" },
    { title: "Email", text: "jane.doe@example.com" },
  ],
};

const handleEdit = () => {
  console.log("Edit button clicked");
};
</script>

<template>
  <VInfoFormReadOnly
    :data="formData"
    :review="false"
    :loading="false"
    @edit="handleEdit"
  />
</template>

Result:

NameJane Doe

Emailjane.doe@example.com