<Preview>

The <Preview> component is used to preview the rendered content, typically for dynamic rendering based on the passed JSON data. It accepts two parameters, id and schema, which specify the ptah instance's ID and the corresponding JSON data to be rendered.

Parameters

• id (String):

  • The ID passed when creating a ptah instance using createPtah, used to identify and select the specific ptah instance.
  • Example: "ptah-1"

• schema (Object):

  • The JSON data to be rendered. This data serves as the basis for the rendered content, typically containing the configuration and content for modules or components.
  • Example: { title: "Sample Module", content: "This is a preview." }

Usage Example

Basic Example

In the simplest use case, the <Preview> component receives the id and schema parameters and renders the corresponding content:

<template>
    <Preview id="ptah-1" :schema="jsonData" />
</template>

<script>
export default {
    data() {
        return {
            jsonData: {
                title: 'Sample Module',
                content: 'This is a preview.'
            }
        };
    }
};
</script>

In this example, jsonData is a JSON object containing the content to be rendered, which is passed to the <Preview> component via the schema property for rendering.

Configuration and Customization

• id property: Ensure that the id corresponds to the instance ID created with createPtah to correctly render the associated content.
• schema property: Ensure that the passed schema is a valid JSON object containing the content and configuration to be rendered.

Notes

• id property: The id must correspond to the ID used when creating the ptah instance with createPtah, ensuring that the correct instance content is rendered.
• schema property: The schema must be a valid JSON data object containing the correct rendering information. Make sure its structure meets the component or module's requirements.

Using with Other Components

The <Preview> component is typically used in conjunction with other components or tools, such as dynamic forms or module configurations, to provide real-time previews and interactive experiences.